role alert
Alert draft v0.1.0
A brief, important message that draws attention without interrupting the task.
An alert tells people something important about the page or what they just did: a saved change, a failed payment, a maintenance window, a quota about to run out. It sits in the content, tinted by its intent with an icon and a title, and is announced by assistive technology when it appears. It never moves focus and never blocks the page: a message that needs a decision is a dialog, a short transient confirmation is a toast.
States matrix
Every option of each styling property against every declared state, per part when states belong to parts. Properties whose options combine in one component token path are crossed: one table per combination of the others. States are forced with data-state, so what you see is exactly what the CSS defines, independent of the pointer. A column header names the inputs or platforms a state belongs to; states without a web rendering are listed under the table.
By intent
| Intent | default |
|---|---|
info |
Scheduled maintenance |
success |
Scheduled maintenance |
warning |
Scheduled maintenance |
error |
Scheduled maintenance |