Alert
Usage
An inline message about the state of the page or an action on it. Matches the reference by default — a tinted block with a thin border and plain text, no icon and no title. The richer treatment is available through `icon` and `title` rather than being forced on every alert, because making it the default was a change to the reference nobody asked for.import { Alert } from '@summonware/ui';Best practices
DoPlace the alert next to what it concerns. A form error at the top of the page makes the user hunt.
DoSay what to do next, not just what went wrong — "The card was declined. Try another payment method."
Don'tUse `danger` for anything recoverable. Only `danger` interrupts a screen reader; overuse trains people to ignore it.
Don'tStack more than two or three. Past that, summarise and link out.
Anatomy
IconOpt-in leading glyph, off by default to match the reference.
TitleBold first line. Supplying it demotes the body text to muted.
BodyThe message itself, passed as children.
DismissTrailing close button, rendered only when `onDismiss` is given.
Examples
Common configurations, variations and states.Tones
Heads up
Your trial ends in 5 days.
Saved
Changes applied.
Approaching limit
You have used 87% of your quota.
Payment failed
The card was declined.
The four semantic tones with a title and body. This is the shape most product alerts take.
Plain
Changes are saved automatically.
This workspace is read-only.
No title and no icon — the reference default. Vertically centred, and the right choice for a one-line notice.
With icons
Invoice sent
A copy has been emailed to the customer.
Upload failed
The file exceeds the 10 MB limit.
Opt in when alerts appear far from the thing they describe and need to be scannable at a glance.
Dismissible
New in this release
Saved views can now be shared with your team.
Adds a close button. Reserve dismissal for messages the user can safely never see again.