display contract
Banner
Full-width notice at the top of a page or layout. For account-wide events.
Variants
- info
- semantic.info
- warning
- semantic.warning
- destructive
- semantic.destructive
Sizes
- md
- 40pt height
- lg
- 48pt height
Slots
- message
- Inline text
- action
- Optional CTA button
- dismiss
- Optional × button
Example
<Banner variant="warning" action={<Button variant="link">Update card</Button>}>Your card on file expires soon.</Banner>Usage rule
Sticky to viewport top, never the page top.
The full Banner contract has 3 more rules, plus the do-not patterns. Get the full recipe.