2.8 KiB
| title | description | video | sass |
|---|---|---|---|
| Close Button | The humble close button can be used anywhere you need something to go away on click. | 0cvJbo7ItpU | scss/components/_close-button.scss |
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">×</span>
</button>
<p>Look at this close button!</p>
</div>
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">×</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>