Alert | Glaze design system

Status

When to use it

Use: Something about this view needs the person's attention: a key expiring, an eval that failed.
Use: Good news worth a line where it happened: a prompt went live.
Use: A note that is part of the page: retention, a limit, a change.
Not for: Where one run stands, in a row. Use Status.
Not for: A region has nothing to show or failed to load. Use Empty state.
Not for: A short label beside a name. Use Badge.

7 rules

Must: Name the thing in AlertTitle in words: "Production key expires tomorrow", never "Warning" or "Error". Because the tint and the icon already say how bad it is, so a title that repeats it leaves the person reading on to learn what.
Never: Give a warn or fail Alert a close button; it stays until the problem is fixed. Because a dismissed failure is still a failure, and AlertClose renders nothing on warn and fail anyway.
Must: Pick status by the news: fail for a failure, warn for a risk, ok for good news, neutral for a note. Because colour means status, so a coral note about retention reads as a failure.
Must: Put at most one secondary action in AlertAction, size="sm", and never an ink one. Because the alert sits inside a view that has its own ink action, and an ink pill on a tint fights it.
Never: Draw a coloured bar on one edge or a shadow under an Alert. Because a side rail is the generated-UI tell Glaze rules out, and the tint already says the status.
Should: Give a dismissible notice a dismissKey that changes with its message. Because the same notice then stays gone across visits, and a new one shows again.
Should: Set announce={false} on a note that is part of the page when it loads. Because a role="status" region on every page load reads the note to a screen reader each time.

4 checks

: warn and fail are role="alert"; neutral and ok role="status"; announce={false} drops the role.
: Each status has its own icon shape, so it reads in grayscale.
: Words on the tints are 5.0:1 or better; the icon takes the status word colour.
: Dismissing moves focus to the next focusable thing after the alert.

2 keys

6 edge cases

6 props

14 tokens