Alert
A message in a hue: a tinted box with a coloured 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-dismiss 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 four border widths thick, the same mark the card uses for a variant.
The close button is a button carrying data-dismiss. 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-dismiss 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 colour 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, neutral |
primary |
Which hue: success for done, warning for careful, alert for wrong, 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-dismiss |
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-dismiss]: 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-control-size |
Size of the close button. |
--yeti-border-width |
The border; the start edge is four of them. |
--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 colour, 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 colour. |
--yeti-on-primary |
Text on the default variant's colour. |
--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 colour 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.
Available since 7.0.0.