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.
<div class="callout">
<button class="close-button" aria-label="Close alert" type="button">
<span aria-hidden="true">×</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">×</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">×</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 |
$closebutton-offset-horizontal |
Number | 1rem |
Right (or left) offset for a close button. |
$closebutton-offset-vertical |
Number | 0.5rem |
Top (or bottom) offset for a close button. |
$closebutton-size |
Number | 2em |
Default font size 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
@include close-button;Adds styles for a close button, using the styles in the settings variables.
