Usage
Use a banner to communicate a contextual status, update, or optional action tied to the current screen. It's pinned to the bottom of the screen, stays visible until acted on or dismissed, and doesn't block the rest of the UI.
- Keep the title to a single, scannable line and reserve the description for essential supporting detail.
- Limit each banner to one primary action plus the dismiss ‘x.’
- Use for messages relevant to the whole screen, not a single element or field.
- Use the Progress variant when the banner represents an ongoing, determinate operation so the progress indicator communicates state.
- Always provide a dismissible ‘x’ affordance for user-triggered banners.
- Don't stack multiple banners at once — show only one at a time.
- Don't use it for critical errors or decisions that must be acknowledged before continuing (use an alert/modal).
- Don't fill it with long paragraphs or multiple competing actions.
- Don't use a banner for transient confirmations that should disappear on their own (use a toast/snackbar).
- Don't hide the dismiss control if the banner isn't self-resolving.
Usage comparison
|
Component |
Interruption |
Blocking |
Placement |
Key difference from Banner |
|---|---|---|---|---|
|
Banner |
Low |
No |
Anchored to bottom of screen |
– |
|
Alert |
High |
Yes |
Centered, overlays entire screen with scrim |
Interrupts and requires a response before continuing |
|
Toast |
Low |
No |
Floats above content, near the bottom of the screen |
Auto-dismisses; not persistent and not tied to a specific element |
|
Inline validation/helper text |
None |
No |
Attached to a single field |
Scoped to one element rather than the screen/section |
Design properties
| Property | Values | Default |
|---|---|---|
| Type Variant | Default | Download | Default |
| ✏️ Title Text | string | Title |
| ✏️ Description Text | string | Description |
Types
Default
Title + inline text button + dismiss (x). Use for a contextual message with one optional action.
Progress
Title + description + progress indicator + dismiss. Use for an in-progress, determinate operation (e.g., a download) where the user benefits from seeing live progress and can dismiss it.
Behavior and interaction
- The banner stays on screen until the user acts on it or dismisses it. It won't disappear on its own.
- The trailing dismiss ‘x’ closes the banner.
- Default variant: tapping the inline text button runs its action, and the banner usually clears once that's done.
- Download variant: the circular indicator shows live progress. The banner can clear itself when the operation finishes, or the user can dismiss it.
- Users can continue interacting with the rest of the screen while the banner is visible.
- The title and description are editable text. Keep them short so the layout holds its single row in default variant and two rows in the progress variant.
Positioning
- The banner pins to the bottom of the screen. If a bottom toolbar is present, it sits directly above the toolbar rather than covering it.
- It stays fixed to the bottom of the screen while the content behind it scrolls.
- It spans the full width of the screen.
- Only one banner is displayed at a time. Don’t stack them.
Related components
Changelog
|
Date |
Version |
Notes |
|---|---|---|
|
Sept 10, 2026 |
1.0.0 |
Initial draft of component guidance |