Dismiss button

The small close button in the corner of an alert, a tag, a modal or a flyout, and the accessible name it needs.

How to use a dismiss button

A dismiss button is an icon-only button that removes or closes the thing it sits in. Because it has no visible text, its whole job depends on one thing: an accessible name.

You rarely have to write one. The components that can be dismissed build their own:

You can leave this page; we will email you when it is ready.

Marketing

.html

<i80-alert type="inline" color="warning" heading="The export takes a few minutes" dismissible>
  You can leave this page; we will email you when it is ready.
</i80-alert>

<i80-tag dismissible>Marketing</i80-tag>
<i80-tag dismissible dismiss-label="Remove">Q3</i80-tag>

<button type="button" class="i80-dismiss-button" aria-label="Close the details panel">
  <i80-icon name="x"></i80-icon>
</button>

Alert and Toast: add dismissible. The button fires a cancelable i80-dismiss event and then removes the element.
Tag: add dismissible. Its name includes the tag's own text, so a screen reader says "Dismiss Marketing" rather than just "Dismiss".
Modal and Flyout: the dismiss button is always there. It calls close(), which fires a cancelable i80-close.

All four take dismiss-label when "Dismiss" is not the right word, or not the right language.

Writing one yourself

In something you built from the dialog classes or in a panel of your own, write the button and give it the class:

<button type="button" class="i80-dismiss-button" aria-label="Close the details panel">
  <i80-icon name="x"></i80-icon>
</button>

Where it goes and when not to use one

Put it at the end of the header row, aligned with the title.
Only put one on something the reader can genuinely get rid of. A message they must act on — a form error, a failed payment — should not be dismissible.
Dismissing is not the same as an action. If the button decides something ("Cancel", "Keep editing"), it belongs in the footer as a Button with words on it.

Attributes

Attribute	On	Notes
`dismissible`	`<i80-alert>`, `<i80-toast>`, `<i80-tag>`	Adds the button. Fires a cancelable `i80-dismiss`, then removes the element.
`dismiss-label`	`<i80-alert>`, `<i80-toast>`, `<i80-tag>`, `<i80-modal>`, `<i80-flyout>`	The accessible name of the button. Default `Dismiss`. On a tag the tag's own text is added after it.
`dismiss-disabled`	`<i80-modal>`, `<i80-flyout>`	`Esc` and the dismiss button do nothing — for instance while something is saving.
`close`	any element inside `<i80-modal>` or `<i80-flyout>`	Closes the dialog when clicked.

When you write the button yourself, put i80-dismiss-button on a real <button type="button"> and give it an aria-label. The class supplies the size, the faint colour, the hover background and the focus ring; it does not supply a name.

See Web Components for loading i80.js.

0.1.0

Første i80-version (fork af upstream, se core/UPSTREAM.md).

On this page: