Alert Notification
Last Updated: September 2026Alert notifications are inline alerting elements that communicate information, status, or required actions from the user. Alert notifications should always be situated adjacent to the content they related to/describe.
Source CodeAnatomy
link- 1Icon
- 2Title
- 3Description
- 4Actions
Variants
linkInfo
Neutral informational status.
Success
Positive confirmation that stays in context.
Warning
Needs attention but is not blocking.
Danger
Blocking or high-priority issue.
With actions
action (primary) and dismissAction (tertiary) use AlertButton.
Usage Guidelines
linkWhen to use
- •For inline, persistent messages tied to a section of the page.
- •When users need a title, description, and optional follow-up actions.
- •For workflow status that should remain visible until dismissed.
When not to use
- •For brief page-level strips — use Banner.
- •For ephemeral post-action feedback — use Toast.
- •For unread counts on a control — use AlertBadge.
Lead with a specific title and one clear primary action.
Don't use vague titles like 'Notice' or 'Alert'.
Choose an icon that reinforces intent (check, warning, error).
Don't use AlertNotification for fleeting confirmations — use Toast.
Behaviors
linkClose control
- •Pass onClose to show a close IconButton.
- •Closing is caller-owned — remove or hide the notification in onClose.
Actions
- •action renders AlertButton primary; dismissAction renders tertiary.
- •Both inherit the notification's intent.
Content Guidelines
linkTitle and description
- •Title: short, specific outcome or problem.
- •Description: one or two sentences with next step context.
- •Avoid real patient identifiers — use synthetic demo copy only.
Accessibility
linkText & Labels
- •title and description are required and provide the accessible message.
- •Action labels must describe the outcome.
ARIA attributes
- •Root uses role="alert".
Keyboard Support
- •Tab moves through action buttons and the optional close control.
- •Space / Enter activates focused controls.
WCAG Compliance Standards
FAQs
linkBanner vs AlertNotification?
Banner is a single-line page strip. AlertNotification is a stacked card with title + description.
Is icon required?
No — it defaults to "info". Override when a different symbol is clearer.
How do I dismiss it?
Provide onClose and/or dismissAction, then unmount or hide the component.