Banner
Last Updated: September 2026Banners are dismissible elements intended to communicate system-wide or local surface-wide information.
Source CodeAnatomy
link- 1Icon
- 2Content
- 3Actions
Variants
linkInfo
General system or workflow information.
Success
Positive page-level confirmation.
Warning
Attention required, not necessarily blocking.
Danger
Critical or blocking page-level issue.
With actions
dismissAction (tertiary), action (primary), and optional onClose.
Usage Guidelines
linkWhen to use
- •For page-level status that should stay visible across a view.
- •When a single sentence of messaging is enough.
- •For system notices, maintenance, or workflow reminders.
When not to use
- •When you need a title plus longer body — use AlertNotification.
- •For fleeting confirmations after an action — use Toast.
- •For unread counts on a control — use AlertBadge.
Keep content to one clear sentence and at most one primary action.
Don't pack multi-paragraph content into Banner — use AlertNotification.
Match intent to severity so color reinforces the message.
Don't use danger for tips or optional info.
Behaviors
linkLayout
- •Horizontal layout: icon, content, then actions aligned to the end.
- •content is a string — not arbitrary React nodes.
Dismissal
- •onClose shows a close IconButton; caller removes the banner.
- •dismissAction is a labeled tertiary AlertButton for softer dismiss.
Content Guidelines
linkCopy
- •One sentence, ideally under ~100 characters.
- •Lead with the outcome or impact, then the next step if needed.
- •Use synthetic demo copy only — no real PHI.
Accessibility
linkText & Labels
- •content is the primary accessible message.
- •Action labels must be specific ('Renew authorization', not 'Go').
ARIA attributes
- •Root uses role="alert".
Keyboard Support
- •Tab through actions and close.
- •Space / Enter activate focused controls.
WCAG Compliance Standards
FAQs
linkBanner vs AlertNotification?
Banner is a single content string in a horizontal strip. AlertNotification adds title, description, and a stacked layout.
Can content be JSX?
No — content is a string. Put richer structure in AlertNotification.
Do I need both onClose and dismissAction?
Usually pick one. onClose is an icon; dismissAction is a labeled tertiary button.