Alert
Reports a problem or a change in the current view.
Status
Schedule changed
Ana moved ingest-prod to run at 02:00 UTC.neutraldefault
Backfill of orders_daily
1,240 partitions loaded in 41 minutes.ok
Credits at 92%
analytics_wh suspends when it reaches its quota on Friday.warn
Load at line 6
The source dropped column region on Oct 18.fail
States
Credits at 92%
title only
Partition 2026-10-18
The source dropped column region.with description
Partition 2026-10-18
with actions
Load at line 6
The source dropped column region on Oct 18.narrow
Schedule changed
Ana moved it to 02:00 UTC.dismissible
Usage
When to use it
- Use
- Something about this view needs reading before the rest: a failed partition, a quota near its limit.
- Use
- A note that stays with the page, such as a schedule changed by someone else.
- Not for
- The result of an action that is already out of view. Use Toast.
- Not for
- A field's own error. Use Field.
- Not for
- Where one job stands, in a row. Use Status.
Rules
9 rules
- Must
- Pick status by what happened: fail for a fault, warn for a risk, ok for good news, neutral for a note. Because the status sets the lead Status, the role and whether it can be closed.
- Never
- Tint an Alert, colour its edge or add a bar down one side. Because the Status already says the outcome once; a pink fill and a red edge say it twice more and drown the title.
- Never
- Draw a warning in the sodium yellow. Because yellow marks the one fix; warn has its own orange so a warning never looks like a button.
- Must
- Leave warn and fail alerts without a close; clear them when the problem is fixed. Because a dismissed failure is still a failure, and the next person on the page never sees it.
- Must
- Give an Alert at most two size="sm" actions, and make only the one fix primary. Because the fix is the next step the failure asks for, so it takes the view's one slab and the way around it stays secondary.
- Should
- Name the thing in the title and let the Status say what happened; the cause goes in the description.
- Must
- Write the AlertDescription as one short sentence that names the cause. Because an alert is read in one glance; a second sentence telling the reader what to do repeats the buttons.
- Must
- Put buttons in AlertAction, which sets them at the row's end and under the text only when the alert is narrow. Because AlertAction measures the alert, not the window, so the sentence keeps its width at any size.
- Should
- Give a dismissible note a dismissKey that changes with its message.
Accessibility
4 checks
- warn and fail are role="alert"; neutral and ok role="status"; announce={false} for neither.
- The Status says the outcome in a word as well as a mark (solid square, half square, diamond), so colour is never alone.
- Title text-1 and description text-2 on the page, both past 4.5:1 in both themes.
- Dismissing moves focus to the next focusable thing after the alert.
Keyboard
1 key
- Enter
- On the close button, dismisses a neutral or ok alert.
Edge cases
4 edge cases
- Narrow
- Under 24rem of its own width the actions wrap under the text, on its start edge.
- No title
- The description takes the title's place beside the Status.
- Dismissed before
- With the same dismissKey it never renders, so it never flashes.
- Forced colours
- The edge draws in CanvasText; the Status word carries the status.
API
4 props
status'neutral' | 'ok' | 'warn' | 'fail'default'neutral'announcebooleandefaulttruedismissKeystringonDismiss() => void
Tokens
11 tokens
--page- #ffffff
--line- #e2dfd5
--inset- 12px
--ok-text- #2c6a3a
--warn-text- #a14b00
--fail-text- #b3261e
--text-1- #161512
--text-2- #55524a
--type-label-sm- 400 12px/16px var(--font-mono)
--type-body- 400 15px/24px var(--font-sans)
--type-body-sm- 400 14px/20px var(--font-sans)