Banner
A full-width notification strip for system-level messages — billing alerts, downtime notices, feature announcements. Sits inline by default, or pinned to the top/bottom of the viewport.
Your trial ends in 7 days.
Variants
Six semantic variants: default, info, success, warning, destructive, and neutral.
Saved.
Approaching quota.
Payment failed.
A neutral note.
Position
Pin a banner to the top or bottom of the viewport with position="top" or "bottom". It becomes position: fixed and stretches edge-to-edge.
Scheduled maintenance at 02:00 UTC.
Dismissible & Action
You're nearing your storage limit.
Installation
Props
Extends all HTMLDivElement props.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "info" | "success" | "warning" | "destructive" | "neutral" | "info" | Visual style. |
position | "top" | "bottom" | "inline" | "inline" | Fixed at the top/bottom of the viewport, or rendered inline. |
icon | React.ReactNode | — | Leading icon shown before the message. |
action | React.ReactNode | — | Trailing action element (typically a button or link). |
dismissible | boolean | false | Show a close button on the right. |
onDismiss | () => void | — | Called when the dismiss button is clicked. |