Component 14 · Complete

Alert

Communicates persistent contextual feedback with semantic tone, clear recovery, and deliberate announcement behavior.

Default

Keep relevant context in the page

A static Alert needs no live-region role. Its title communicates the condition while the description provides useful context.

Tones

Match the message, not its intensity

Semantic tones support meaning across themes. Every title remains clear when color and icons are unavailable.

Actions

Offer a clear next step

Include only actions that directly resolve or explain the condition. Keep hierarchy proportional to the surrounding page.

Dismissible

Preserve a logical focus destination

The close control has a specific accessible name. After dismissal, focus moves to the adjacent restore control in this demonstration.

Semantics

Choose announcement behavior deliberately

Presence at page load and urgency determine semantics. Visual tone alone does not determine the live-region role.

No roleStatic contextAlready present when the page loads
role="status"Polite updateDynamic, useful, and non-urgent
role="alert"Urgent updateDynamic and requiring immediate attention

Usage guidance

Lead with the outcome or condition.

Use the description for impact and recovery. Avoid generic titles, vague actions, and urgent announcement semantics for ordinary messages.

Next component: Disclosure and Accordion