Core · Feedback and status
Alert
Tells the reader about the page or a task: information, success, a warning or an error.
Example
The four kinds of alert: information, success, warning and error.
Known issues
None known.
Code
Copy the markup
<div class="luz-alert luz-alert--warning">
<div class="luz-alert__icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="20" height="20">…</svg></div>
<div>
<div class="luz-alert__title">Warning</div>
<div class="luz-alert__body">Storage is almost full.</div>
</div>
</div>Variants and options
One modifier sets the status. Write the status in the title too: the colour is only a second cue.
| Class | Use it for |
|---|---|
.luz-alert | Something useful to know |
.luz-alert | A task that finished well |
.luz-alert | Something that may go wrong soon |
.luz-alert | Something that went wrong and needs action |
How it works
A block with an icon, a title and a body, styled by components/alert.css. No JavaScript.
- The icon is an SVG of the Icons page, decorative (
aria-hidden="true"): the title already names the status. - The start border and the title take the status colour; the body stays in the secondary text colour.
Without JavaScript
Nothing changes: the alert is static HTML and CSS.
Keyboard and ARIA
An alert is not interactive and takes no focus.
- An alert that is on the page when it loads needs no role.
- An alert that appears after an action must be announced: insert it into a container that is already on the page with
role="status", orrole="alert"for an error that needs attention now.
Contrast and focus are in the Design tab.
Design
When to use
Use an alert to tell the reader about a state that matters on this page.
- Information they need before they act: "This project is archived."
- The result of a task: success, a warning or an error.
When not to use
Do not use an alert for a message that must stop the reader, or one they can safely miss.
- A decision the reader must make before going on: use a modal.
- A short confirmation that needs no action: use a toast.
- An error on one field: put it next to the field (form fields).
- More than two alerts at once: merge them, or the reader stops reading them.
Do and don't
Writing the content
Say what happened, then what to do next.
- The title is the status in one or two words: "Warning", "Build failed".
- The body is one or two short sentences: "The build failed. Check the log and run it again."
- Never rely on the colour or the icon alone.
Contrast and focus
Each title is in its status colour on its own tint; the body text is the same on every tint.
| Part | Colour on background | Light | Dark | High contrast | Needs |
|---|---|---|---|---|---|
Title, info | --luz-color-info on --luz-color-info-bg over --luz-surface-page | 9.0:1 | 9.7:1 | 13.6:1 | 4.5:1 |
Title, success | --luz-color-success on --luz-color-success-bg over --luz-surface-page | 5.4:1 | 10.1:1 | 8.9:1 | 4.5:1 |
Title, warning | --luz-color-warning on --luz-color-warning-bg over --luz-surface-page | 6.8:1 | 9.0:1 | 8.9:1 | 4.5:1 |
Title, error | --luz-color-danger on --luz-color-danger-bg over --luz-surface-page | 5.4:1 | 10.2:1 | 8.9:1 | 4.5:1 |
Body, info | --luz-text-secondary on --luz-color-info-bg over --luz-surface-page | 6.3:1 | 6.0:1 | 18.5:1 | 4.5:1 |
Body, success | --luz-text-secondary on --luz-color-success-bg over --luz-surface-page | 6.3:1 | 6.0:1 | 18.6:1 | 4.5:1 |
Body, warning | --luz-text-secondary on --luz-color-warning-bg over --luz-surface-page | 6.3:1 | 5.7:1 | 18.4:1 | 4.5:1 |
Body, error | --luz-text-secondary on --luz-color-danger-bg over --luz-surface-page | 6.2:1 | 6.5:1 | 18.4:1 | 4.5:1 |
Measured from the token values of each mode, rounded down. Needs is the WCAG 2.2 AA minimum: 4.5:1 for text, 3:1 for focus rings, borders and icons.
- Focus: the alert takes none. A link or a button inside it keeps its own focus ring.
- Not colour alone: the title names the status and the icon has its own shape. The start border is a decorative extra.
Tokens it uses
The 18 tokens that components/alert.css reads, by family. Each family links to its page, with the values in every mode. In Figma they are variables with the same names: see Tokens in Figma.
- Color
--luz-color-danger,--luz-color-danger-bg,--luz-color-info,--luz-color-info-bg,--luz-color-success,--luz-color-success-bg,--luz-color-warning,--luz-color-warning-accent,--luz-color-warning-bg,--luz-text-secondary- Spacing and sizing
--luz-space-3xs,--luz-space-md,--luz-space-sm- Typography
--luz-text-base,--luz-text-md,--luz-text-sm- Radius
--luz-radius-md- Motion
--luz-duration-base
Keyboard and ARIA are in the Code tab.