Banner
FreeA full-width, page-level message pinned to the top of the viewport or content area. Banners communicate system-wide information such as maintenance windows, feature announcements, or critical outages. They sit above all other content and optionally include a call-to-action link or dismiss button. Use role="alert" for urgent system alerts and role="status" for informational announcements.
8 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Info | Blue-toned banner for neutral announcements and feature updates. | Use for system announcements — "New feature available", "Scheduled maintenance on Saturday". |
| Warning | Amber-toned banner for conditions that affect the entire application. | Use for degraded service, upcoming deadlines, or plan limits — "You have reached 90% of your storage quota". |
| Promotional |
Usage Guidelines
Pin to the top of the viewport so it is impossible to miss.
Display more than one banner at a time — prioritise the most critical.
Keep the message to a single, concise sentence.
Use banners for form validation or inline feedback — use Alert or Error Summary.
Include an optional action link for resolution — "Upgrade plan", "View status page".
Auto-dismiss error banners — they must persist until the condition is resolved.
Use role="alert" for urgent banners and role="status" for informational ones.
Code
<div class="lex-banner lex-banner--warning" role="alert">
<div class="lex-banner__content">
<svg class="lex-banner__icon" aria-hidden="true">
....lex-banner {
display: flex;
align-items: center;
justify-content: center;
...// Using Lexicon CSS classes with React
<Banner severity="warning" dismissible>
...Design Tokens
| Token | Value (dark) | Value (light) | CSS property |
|---|---|---|---|
| --lex-banner-bg | — | — | bg |
| --lex-banner-text | — | — | text |
| --lex-banner-border | — | — | border |
| --lex-banner-padding | — | — | padding |
Accessibility
- Use role="alert" for urgent banners (error, warning) to trigger immediate screen reader announcement.
- Use role="status" for informational banners to announce politely without interruption.
- Dismiss button requires an accessible label — aria-label="Dismiss banner".
- Action links within the banner must be keyboard-accessible and clearly labelled.