How to build an accessible Notification in React
role="alert" for warning and error so assistive tech announces them assertively, role="status" for info and success; the variant icon is decorative (aria-hidden) and color is always paired with the icon and title, and the dismiss control is a labeled button
When to use a Notification
- Surfacing a prominent, often actionable message in the page flow (sync result, failed upload, available update)
- Pairing a status message with one or more recovery actions via the actions slot
- Communicating outcomes that should persist until the user reads or acts on them
When not to use it
- Transient, auto-dismissing feedback that floats above the layout — use Toast
- A terse single-line action status next to a control — use InlineLoading
- Blocking the user for a required decision — use Modal or AlertDialog
Accessibility
Role alert, verified at WCAG 2.2-AA.
Common mistakes
Avoid: Stacking Notifications in a fixed corner viewport on a timer to fake toasts
Prefer: <Toast> for ephemeral, floating, auto-dismissing feedback
Notification is an in-flow banner; faking toast behavior duplicates Toast and breaks layout expectations
Example
<Notification variant="info" title="Sync complete" description="Your files are up to date." />