Usage
A banner is a persistent message at the top of the content area. It raises an important, product-level issue without blocking the current task, and it stays until the person acts on it or dismisses it. Use it for account, subscription, or system-wide states that need attention soon but not immediately.
- Use for messages that are important or time-sensitive but aren’t critical errors.
- Use for issues that carry across screens, such as account, subscription, legal, or feature availability states.
- Offer one or two actions while leaving the person free to continue and decide later.
Usage comparison
|
Component |
Interruption |
Blocking |
Placement |
Best for… |
|---|---|---|---|---|
|
Snackbar |
Low |
No |
Floating: Bottom of screen, floating over content |
Lightweight, transient feedback after an action (save, undo, upload started, error retry, etc) |
|
Info card |
Low-medium |
No |
Inline: adjacent to the content it describes |
Persistent explanation of a state, scoped to a section or a screen |
|
Promo card |
Low-medium |
No |
Inline: in the content flow |
Promoting a Firefox feature someone hasn’t tried yet; optional and safe to dismiss |
|
Banner |
Medium |
No |
Inline: Top of content, below top app bar, inline with content |
Important, cross-screen or app-level issues needing attention + actions |
|
Dialog |
High |
Yes |
Blocking: Centered overlay taking focus |
Urgent, high-risk, or destructive decisions; anything that must be acknowledged now |
Design properties
| Property | Values | Default |
|---|---|---|
| Type Variant | Default | Outline | Default |
| Show secondary button Boolean | true | false | true |
| Show title Boolean | true | false | true |
Types
Default
Includes an optional title and an optional secondary action button.
Outline
Includes an optional title and an optional secondary action button.
Behavior and interaction
Behavior
- A banner appears on its own when a state changes, not in response to something the person did.
- It stays until the person resolves the issue or dismisses it. It never disappears on a timer.
- It is non-modal. Content behind it stays interactive.
- Dismissal holds for at least the current session. If the underlying problem persists, the banner can return at a sensible moment, such as when the person enters the feature it affects.
Positioning
- Place the banner at the top of the content area, below the app bar, spanning the full content width.
- Show one banner at a time. Banners don’t stack.
- The banner is inline and shares elevation with the content, so it scrolls out of view with it.
Related components
Changelog
|
Date |
Version |
Notes |
|---|---|---|
|
Nov 20, 2025 |
1.0.0 |
Initial draft of guidance |