When to use
- Promotion: To promote new features or product offerings.
- Contextual states: To indicate entire application states such as network connectivity issues or trial expiration.
- Persistent feedback: To display messages that should remain visible at the top of a screen until the user dismisses them or resolves the underlying issue.
When to use something else
- Task-specific feedback: Do not use a Banner to provide feedback after a user completed or failed a specific task. Depending on the context, consider inline validation, an Alert, Sonner, or Dialog.
- Navigation: Banners should not be used for internal application navigation. Use the top bar pattern and primitives such as Tabs for in-page structure.
- Permanent content: Banners are temporary and should not be used for core application functionality that belongs in standard headers or sections.
- Critical, blocking alerts: Alerts that must be addressed immediately should be displayed with an Alert dialog.
Dos and don’ts
- Do place the Banner at the top of the UI, above the Topbar.
- Do respect the max height of the Banner, and keep text to a single line.
- Don’t stack multiple Banners on top of each other.
Behavior
- Banners may be dismissible or persistent per product rules (including across sessions for announcements).
- Banners do not trap focus; critical confirmations belong in Alert dialog.
Often used with
Primary or dismiss Button; optional text link.Accessibility
- Landmark structure: Wrap static page-level banners in standard landmark elements like
<aside>or<div role="region" aria-label="System Announcement">. - Dynamic announcements: For client-side rendered banners, apply
role="status"so live updates are announced without interrupting active user keyboard flow.