display contract
Banner
Full-width notice at the top of a page or layout. For account-wide events.
Variants
- info
- warning
- destructive
Sizes
- md
- lg
Slots
- message
- action
- dismiss
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.