Alert

A message in a hue: a tinted box with a colored edge, an optional icon, and an optional close button that the module wires up.

Example

View Code 
<div class="alert" role="status" data-variant="success">
    <svg aria-hidden="true" viewBox="0 0 16 16"><path d="M3 8.5l3 3 7-7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
    <div><strong>Saved.</strong> Your changes are live.</div>
    <button type="button" data-close aria-label="Dismiss">×</button>
</div>

When to use it

Something the reader should know now: the form was saved, the trial ends on Friday, the address did not validate. One message, one hue, in the flow of the page where it applies. For a message that arrives and leaves on its own, wait; that is not this.

How it works

A flex row: an optional icon, the message, and an optional close button pushed to the end. The hue draws the border and, at medium emphasis, a tint behind the text; high fills the box for the message that must be seen; low keeps the border alone. The start edge is --yeti-alert-edge thick, four border widths by default (the same mark the card uses for a variant), at every emphasis. The token is undeclared and read with that fallback, so the four is four of whatever --yeti-border-width is in force where the alert sits, not the page's root value; set --yeti-alert-edge directly to fix the width regardless.

The close button is a button carrying data-close. Yeti's alert.js, loaded once with <script type="module" src="…/js/alert.js">, listens on the document: a click fades the alert over the fast duration and removes it. Without the module the button does nothing, so leave it out on pages that do not load the module.

<div class="alert" role="alert" data-variant="alert" data-emphasis="high">
    <div><strong>Payment failed.</strong> The card was declined.</div>
    <button type="button" data-close aria-label="Dismiss">×</button>
</div>

Accessibility

role="status" for the usual notice, which is announced politely when it appears; role="alert" only for something urgent, which interrupts whatever the reader is doing. Neither role announces content that is already on the page at load; they matter for alerts inserted later. The color is decoration: say "Saved" or "Failed" in the words. The close button needs a name, and after it removes the alert focus moves to where the alert was, so the reader keeps their place; put an alert near the thing it describes rather than far above it.

Attributes

Attribute Type Values Default Description
data-variant enum primary, secondary, success, warning, alert, danger, neutral, black, white primary Which hue: success for done, warning for careful, danger for wrong (alert is the same ladder under its Foundation 6 name), primary for news.
data-emphasis enum high, medium, low medium How loud: medium is a tint, high a solid fill, low the border alone.

Markers

Attributes that descendants carry, not the root.

Attribute Type Values On Description
data-close boolean > button The close button; removes the alert when alert.js is loaded.

Children

  • > svg: 0 to 1. An icon, first, sized to the text.
  • > [data-close]: 0 to 1. A button, last, that removes the alert when alert.js is loaded.
  • > *: at least 1. The message, in any element.

Tokens

Token Description
--yeti-alert-radius Corner radius.
--yeti-alert-padding Padding inside.
--yeti-alert-edge Width of the start edge, at every emphasis. Undeclared; falls back to four times the local --yeti-border-width.
--yeti-control-size Size of the close button.
--yeti-border-width The border on every side but the start edge.
--yeti-space-sm Gap between the icon, the body, and the close button.
--yeti-color-text The body text.
--yeti-color-primary The default variant's color, when data-variant is absent.
--yeti-color-primary-subtle The default variant's tint.
--yeti-color-primary-soft The default variant's soft stop.
--yeti-color-primary-strong The default variant's strong stop.
--yeti-color-primary-text The default variant's text color.
--yeti-on-primary Text on the default variant's color.
--yeti-duration-fast How long the alert takes to fade out when alert.js dismisses it.
Internal tokens (may change between minor versions) - `--_yeti-variant` - `--_yeti-variant-subtle` - `--_yeti-variant-strong` - `--_yeti-variant-text` - `--_yeti-on-variant` - `--_yeti-variant-soft`

Accessibility

  • Use role="status" for the usual notice, which is announced politely, and role="alert" only for something urgent, which interrupts. Content present at page load is not announced by either role; the roles matter for alerts inserted later. Meaning carried by the color must also be in the words. The close button needs a name. Without the module the button does nothing, so leave it out on pages that do not load alert.js.
Key Action
Enter / Space On the close button, removes the alert.

Browser support

  • Used without guards: lh unit, color-mix()
  • Behind @supports: nothing

JavaScript

Optional enhancement: components/alert/alert.js. The component works without it.

Each event bubbles, crosses a shadow boundary, and cannot be cancelled.

Event Module Detail Description
yeti:close alert.js none Dispatched on the .alert after the fade and before it is removed, while it is still in the page.

Available since 7.0.0.