Feedback
Alert
A message in the flow of the page, with an optional status.
On this page
An alert is a message in the flow of the page, about the page it sits in. It is a flat face with a half-pixel contour. A status tints the face faintly and colors the icon; the words stay in ink, so the hue never carries the meaning alone.
Alert
<div class="alert" role="status"> <svg class="icon alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <circle cx="12" cy="12" r="9" /> <path d="M12 11v5M12 8v.01" /> </svg> <div class="alert-body"> <p class="alert-title">A new version is available</p> <p class="alert-description">Reload to use the latest build of the dashboard.</p> </div> <button type="button" class="btn btn-sm">Reload</button></div>#Status
Choose the status by what the reader has to do, and say it in the words as well.
alert-infoadds context that changes nothing yet.alert-successconfirms something that just completed.alert-warningasks for attention before something goes wrong.alert-dangerreports a failure or a blocked action.
Status
<div class="alert alert-info" role="status"> <svg class="icon alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <circle cx="12" cy="12" r="9" /> <path d="M12 11v5M12 8v.01" /> </svg> <div class="alert-body"> <p class="alert-description">Scheduled maintenance on Sunday from 02:00 to 03:00 UTC.</p> </div></div><div class="alert alert-success" role="status"> <svg class="icon alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <circle cx="12" cy="12" r="9" /> <path d="m8.5 12.5 2.5 2.5 4.5-5.5" /> </svg> <div class="alert-body"> <p class="alert-description">Your domain is verified and serving traffic.</p> </div></div><div class="alert alert-warning" role="status"> <svg class="icon alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <path d="M12 4 3 19h18L12 4ZM12 10v4M12 17v.01" /> </svg> <div class="alert-body"> <p class="alert-title">Your card expires this month</p> <p class="alert-description">Update the payment method to keep deployments running.</p> </div> <button type="button" class="btn btn-sm">Update</button></div><div class="alert alert-danger" role="alert"> <svg class="icon alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <circle cx="12" cy="12" r="9" /> <path d="M12 8v5M12 16v.01" /> </svg> <div class="alert-body"> <p class="alert-title">The build failed</p> <p class="alert-description">The install step exited with code 1. Read the logs for the missing dependency.</p> </div></div>#Layout
An alert uses --alert-radius, defaulting to var(--radius-control-lg). When it is held directly in a tray, set that property on the alert to var(--radius-surface) to follow the holder's corner and inset.
Put icon alert-icon on the icon: it centers on the first line of text, however many lines follow. alert-body takes the remaining width. A button or a link after the body sits at the end of the row and wraps under the text when the alert is narrow.
In a narrow column
<div class="alert alert-warning max-w(280) mx-auto" role="status"> <svg class="icon alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <path d="M12 4 3 19h18L12 4ZM12 10v4M12 17v.01" /> </svg> <div class="alert-body"> <p class="alert-title">Usage is at 90%</p> <p class="alert-description">Requests are limited when the plan runs out.</p> </div> <button type="button" class="btn btn-sm">Upgrade</button></div>#Accessibility
- An alert that appears after the page has loaded needs a live region:
role="status"waits for a pause, androle="alert"interrupts. Keeprole="alert"for failures that need action now. - An alert that is part of the page from the start needs no role.
- Mark the icon
aria-hidden="true"; the text carries the message.
#Classes
| Class | Description |
|---|---|
alert | A neutral message: a flat face with a half-pixel contour. A button or a link after the body sits at the end of the row and wraps under the text when the alert is narrow |
alert-info | Context that changes nothing yet: a faint tint and icon in the info hue. With alert |
alert-success | Something that just completed: a faint tint and icon in the success hue. With alert |
alert-warning | Attention before something goes wrong: a faint tint and icon in the warning hue. With alert |
alert-danger | A failure or a blocked action: a faint tint and icon in the danger hue. With alert |
alert-icon | Beside icon on the icon: centers it on the first line of text, however many lines follow |
alert-body | Holds the words and takes the remaining width |
alert-title | The few strong words that carry the message |
alert-description | The sentence under the title, or the whole message of an alert without a title |
#Custom properties
| Property | Default | Description |
|---|---|---|
--alert-radius | var(--radius-control-lg) | Circular radius before the corner scale; use var(--radius-surface) when held directly in a tray. On alert |