Overview
Use Alert for important information that should remain near the affected content until people act, dismiss it, or the underlying condition changes.
Expiring credential
The warning remains visible and offers a relevant recovery action.
Anatomy
A complete alert combines semantic status, a concise summary, useful detail, an optional action, and optional dismissal.
- 1Status icon
Reinforces tone without carrying meaning alone.
- 2Title
Summarizes the condition in a scannable phrase.
- 3Description
Explains impact or the most useful next step.
- 4Action
Offers one contextual response when needed.
- 5Dismiss
Removes non-critical, recoverable information.
When to use
Use Alert when a condition affects the current page, task, or region and must remain discoverable.
Recommended
- Explain page-level conditions
Communicate maintenance, policy, availability, or configuration states.
- Keep recovery in context
Place the alert close to affected content and offer one direct action.
- Confirm durable outcomes
Show success when confirmation must remain visible after a transient toast would disappear.
When not to use
Choose a different feedback pattern when information is transient, blocking, field-specific, or merely decorative.
Avoid
- Do not replace validation
Place field errors beside the relevant input.
- Do not interrupt with a banner
Use Dialog only when immediate confirmation or input is required.
- Do not duplicate transient feedback
Use Toast for brief operation results that need no persistent action.
Variants
Tone communicates meaning while treatment and layout control emphasis and density.
Tonal
Default container for contextual persistent feedback.
Outlined
Lower-fill treatment for visually dense pages.
Filled
Highest emphasis for rare, important conditions.
Inline or block
Adapts compact statements and richer guidance.
States
Alert tone reflects the meaning of the condition rather than workflow progress alone.
| State | Trigger | Visual response | Interaction |
|---|---|---|---|
| Neutral | General contextual note | Surface treatment | Optional action |
| Information | Relevant non-critical update | Primary tonal treatment | Optional details |
| Success | Durable positive outcome | Success treatment | Continue or inspect |
| Warning | Risk requires attention | Warning treatment | Prevent or resolve |
| Error | Failure requires awareness | Error treatment and alert role | Recover or get help |
Behavior
Alert owns semantic presentation; applications own visibility, timing, recovery, persistence, and telemetry.
Announcement
Error defaults to alert; other tones default to polite status.
Controlled dismissal
Dismiss invokes a callback and leaves visibility to the parent.
Action focus
Actions and close controls retain native keyboard behavior.
Responsive flow
Content and controls reflow without truncating the message.
Accessibility
Every alert must remain understandable without color, iconography, or visual position.
- Use alert only for urgent, dynamically introduced failures; use status for other updates.
- Include the condition in visible text instead of relying on the status icon.
- Do not move focus to an alert unless the workflow genuinely requires immediate attention.
- Give dismissal a specific accessible label when several alerts are present.
- Keep action labels explicit and unique in context.
- Do not automatically dismiss content before people can read or operate it.
Content guidelines
State the condition first, explain impact briefly, and offer a specific next step only when one exists.
Lead with the condition
Use a factual, concise title.
Certificate expires in 8 days
Explain impact
Say what happens if the condition continues.
Service connections may stop.
Name the response
Use an action-and-object label.
Rotate certificate
Avoid alarmism
Match urgency to actual consequence.
Deployment blocked
Examples
Inline layout supports concise confirmation while retaining the same semantic structure.
Inline success
Props / API
Alert extends div attributes and composes application-owned actions.
Props