Foundation
Jump to Nav

# Close Button

The humble close button can be used anywhere you need something to go away on click.

A close button is a `<button>` element with the class `.close-button`. We use the multiplication symbol (`&times;`) as the X icon. This icon is wrapped in a `<span>` with the attribute `aria-hidden="true"`, so screen readers don't read the X icon.

The button is also labeled with `aria-label` to clarify what the button's purpose is.

    <div class="callout">
      <button class="close-button" aria-label="Close alert" type="button">
        <span aria-hidden="true">&times;</span>
      </button>
      <p>Look at this close button!</p>
    </div>

Look at this close button!

## Making Closable

The close button on its own doesn't close elements, but you can use it with Toggler, Reveal, Off-canvas, and other plugins that have open and close behaviors.

Any element can be used as a close trigger, not just close button. Adding the attribute `data-close` to any element within the callout will turn it into a close trigger.

The below example pairs the callout with the close button component and `data-closable` attribute to create a dismissible alert box.

    <div class="callout" data-closable>
      <p>You can so totally close this!</p>
      <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="success callout" data-closable="slide-out-right">
      <p>You can close me too, and I close using a Motion UI animation.</p>
      <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

You can so totally close this!

You can close me too, and I close using a Motion UI animation.

## Sass Reference

### Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

Name | Type | Default Value | Description
--- | --- | --- | ---
`$closebutton-position` | List | `right top` | Default position of the close button. The first value should be `right` or `left`, and the second value should be `top` or `bottom`.
`$closebutton-offset-horizontal` | Number or Map | `small: 0.66rem medium: 1rem` | Right (or left) offset(s) for a close button.
`$closebutton-offset-vertical` | Number or Map | `small: 0.33em medium: 0.5rem` | Top (or bottom) offset(s) for a close button.
`$closebutton-size` | Number or Map | `small: 1.5em medium: 2em` | Default font size(s) of the close button.
`$closebutton-lineheight` | Number | `1` | The line-height of the close button. It affects the spacing of the element.
`$closebutton-color` | Color | `$dark-gray` | Default color of the close button.
`$closebutton-color-hover` | Color | `$black` | Default color of the close button when being hovered on.

### Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

#### close-button-size

    @include close-button-size($size);

Sets the size and position of a close button.

Parameter | Type | Default Value | Description
--- | --- | --- | ---
`$size` | Keyword | `medium` | The size to use. Set to `small` to create a small close button. The 'medium' values defined in `$closebutton-*` variables will be used as the default size and position of the close button.

#### close-button

    @include close-button;

Adds styles for a close button, using the styles in the settings variables.

### Functions