@ithaka/bonsai/documentation/pages/components/close-button.md

ITHAKA core styling

---
title: Close Button
description: A classic and reusable close button component.
foundation: http://foundation.zurb.com/sites/docs/close-button.html
sass: ./scss/_closebutton.scss
---


## How to Use

A close button is a control added to a large container that allows a user to terminate a window on click (such as a [modals](/styleguide/modal.html), 
  [callouts](/styleguide/callout.html), [dropdowns](/styleguide/dropdown-box.html), and [off-canvas](/styleguide/off-canvas.html)). 

```html
<button class="close-button" data-close aria-label="close" type="button">
    <span aria-hidden="true">&times;</span>
</button>
```

_Note: `&times;` is used to get a symmetrical `x` for the close button, independent of font style, weight, etc._

## Examples

The closing behavior of the button is contained within the elements that consume it.
The following are examples of the same close button code used in different elements:

### Callout Example

Here, the close behavior is linked to the `data-closable` attribute of the surrounding `.callout`. 

For a more complete description of how this works, check out the [callout](/styleguide/callout.html) entry.

```html_example
<div class="callout" data-closable>
  <p>This is a callout with a close button in the upper right corner</p>
  <!-- Start of close button markup -->
  <button class="close-button" aria-label="close callout" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
  <!-- End of close button markup -->
</div>
```

_(To get the callout to reappear, simply reload the page)_


### Modal Example

The closing behavior of the [modal component](/styleguide/modal.html) 
  is achieved via the `data-reveal` attribute. 

```html_example
<button type="button" class="button" data-open="kitchen-sink-modal">Click to see a closeable modal</button>
<div class="reveal" id="kitchen-sink-modal" data-reveal data-icon="shopping-cart" data-circle-color="alert">
    <h2>This is a modal with a close button in the upper right corner</h2>
    <!-- Start of close button markup -->
    <button class="close-button" data-close aria-label="close modal" type="button">
        <span aria-hidden="true">&times;</span>
    </button>
    <!-- End of close button markup -->
</div>
```

## Guidelines
1. Use in contexts in which the user may _dismiss_ or _close_ a container without triggering novel functionality.
2. The close button should consistently appear in the upper right of it's container.

## Accessibility
1. Use relevant `aria-labels` and `aria-hidden` values.
2. The close button must be reachable via tabbing and related keyboard commands.

## Avoid
1. Limit usage to one per element.
2. The dismissal of a container via a `close-button` should not be considered as a user's conscious approval or verification.