Alert
A tinted message box with a colored bar on the start edge.
Add .alert to any block element. Give it
role="alert" for urgent messages or
role="status" for the rest, so screen readers announce it.
Your changes were saved as a draft.
Colors
A color class sets the bar, border, tint and text color.
A new version is available.
Payment received.
Your trial ends tomorrow.
The upload failed.
Headings and links
Headings and links inside an alert take its color.
Welcome to Iris CSS
Start with plain HTML, then read the docs when you need a variant.
Dismissible Added in 1.1
A .close button as the first child sits at the end of
the alert, and the text wraps around it. Remove the alert in its
click handler.
A new version is available. Reload the page to get it.
Variables
| Variable | Default |
|---|---|
--i-alert-padding-block | calc(var(--i-spacing) * 0.75) |
--i-alert-padding-inline | var(--i-spacing) |
--i-alert-accent-widthColored bar on the start edge | 0.25rem |