63 lines
2.8 KiB
Markdown
63 lines
2.8 KiB
Markdown
|
---
|
||
|
|
title: Close Button
|
||
|
|
description: The humble close button can be used anywhere you need something to go away on click.
|
||
|
|
video: '0cvJbo7ItpU'
|
||
|
|
sass: 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.
|
||
|
|
|
||
|
|
<p>
|
||
|
|
<a class="" data-open-video="1:07"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="docs-codepen-container">
|
||
|
|
<a class="codepen-logo-link" href="https://codepen.io/ncoden/pen/vVrrjG?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
```html_example
|
||
|
|
<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
|
||
|
|
|
||
|
|
<div class="callout primary">
|
||
|
|
<p>The close button on its own doesn't close elements, but you can use it with <a href="toggler.html">Toggler</a>, <a href="reveal.html">Reveal</a>, <a href="off-canvas.html">Off-canvas</a>, and other plugins that have open and close behaviors.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="primary callout">
|
||
|
|
<p>Any element can be used as a close trigger, not just close button. Adding the attribute <code>data-close</code> to any element within the callout will turn it into a close trigger.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
The below example pairs the callout with the close button component and `data-closable` attribute to create a dismissible alert box.
|
||
|
|
|
||
|
|
<a class="" data-open-video="4:24"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
|
||
|
|
|
||
|
|
<div class="docs-codepen-container">
|
||
|
|
<a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/JNvEox?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
```html_example
|
||
|
|
<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>
|
||
|
|
```
|