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 (×) 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.

Watch this part in video

<div class="callout" data-closable>
  <button class="close-button" aria-label="Close alert" type="button" data-close>
    <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.

Watch this part in video

<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-z-index`	Number	`10`	Default z-index for a close button.
`$closebutton-default-size`	String	`medium`	Button size to use as default
`$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`	Size(s) of the close button. Used to generate sizing modifiers.
`$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.