How to build an accessible Alert in React
role="alert" makes assistive tech announce the message when it appears; the dismiss control is a real button so it is reachable and labeled, and color is paired with an icon/title so meaning is not conveyed by hue alone
When to use a Alert
- Surfacing a persistent, contextual message inline within a view (warning, error, info, success)
- Communicating status that should stay visible until read or resolved
- Offering an inline recovery action tied to the message (action prop)
When not to use it
- Transient confirmation that should auto-dismiss — use Toast
- Blocking the user for a decision — use Modal or AlertDialog
Accessibility
Role alert, verified at WCAG 2.2-AA.
Common mistakes
Avoid: Auto-dismissing an Alert on a timer to mimic a notification
Prefer: <Toast> for ephemeral feedback
Alerts persist by design; auto-hiding important inline context risks the user missing it
Example
<Alert variant="info" title="Heads up">Your trial ends soon.</Alert>