Banner
A full-width bar for site-level or page-level announcements. Appears at the top of a page or section.
Preview
Lexicon v1.1 is now available with new components.
Deployment complete. All services are running.
Scheduled maintenance on Sunday at 02:00 UTC.
Service disruption detected. Some features may be unavailable.
Variants
- Info -- blue. General announcements.
- Success -- green. Positive confirmations.
- Warning -- amber. Caution notices.
- Error -- red. Critical issues.
- Neutral -- grey. Non-semantic messages.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'info' | 'success' | 'warning' | 'error' | 'neutral' | 'info' | Semantic colour |
message | string | -- | Banner text |
action | { label: string; onClick: () => void } | -- | Optional action link |
dismissible | boolean | true | Shows dismiss button |
onDismiss | () => void | -- | Dismiss callback |
Code example
React
tsx
import { Banner } from '@thepace/lexicon/components';
<Banner variant="info" message="Lexicon v1.1 is now available."
action={{ label: 'Learn more', onClick: handleNav }}
dismissible />Vanilla HTML
html
<div class="lex-banner lex-banner--info" role="status">
<span class="lex-banner__icon"><!-- icon --></span>
<span class="lex-banner__content">Lexicon v1.1 is available.</span>
<button class="lex-banner__action">Learn more</button>
<button class="lex-banner__dismiss" aria-label="Dismiss">×</button>
</div>CSS class reference
| Class | Purpose |
|---|---|
.lex-banner | Base banner styles |
.lex-banner--info | Info variant |
.lex-banner--success | Success variant |
.lex-banner--warning | Warning variant |
.lex-banner--error | Error variant |
.lex-banner--neutral | Neutral variant |
Accessibility
- Use
role="status"for informational banners androle="alert"for errors. - Dismiss button has
aria-label="Dismiss". - Banner content should be concise — one sentence.
Guidelines
Do
- Place banners at the very top of the page or container.
- Keep the message to one line; use the action link for details.
Don't
- Don't stack multiple banners — prioritise the most important one.
- Don't use for field-level validation — use inline error text.