Alert
An inline message tinted by its tone. Errors say what happened and how to fix it.
Examples
Alerts
Published. Your changes are live.
Heads up. Scheduled maintenance on Sunday.
Couldn't save. The title is required. Add one and try again.
Anatomy
.alert | A frosted row tinted with its tone. |
> div | The message. |
div > strong | Optional lead phrase, in the tone colour: what happened. |
> button[data-dismiss] | Optional dismiss button after the message. |
API
| Attribute | Values | Description |
|---|---|---|
data-tone | accentsuccesswarningdangerinfo | Sets the tint and the colour of the <strong> lead. Default accent. |
data-dismiss | <selector> | On a button inside: aequitas.js removes the closest .alert, .toast or .chip on click, or the closest match of the selector you give. |
Behaviour
A click on a [data-dismiss] button removes the alert from the page; when focus was inside it, focus moves to the next focusable element (the previous one at the end of the page or dialog). Without aequitas.js the button does nothing until you wire it.
From aequitas.js. It initialises itself and enhances markup added later on its own, so it works the same in an SPA.
Accessibility
- An alert has no role of its own. Add
role="alert"to an error that appears after an action,role="status"to a confirmation; one already on the page at load needs neither. - Tone is colour only. The
<strong>lead carries the meaning in words ("Couldn't save."). - Dismissing removes the alert while its button has focus; aequitas.js moves focus to the next focusable element so it doesn't fall back to the document. Move it yourself if somewhere else makes more sense, such as the field the error was about.