Feedback
Banner
A full-width announcement bar for site-wide messages — new releases, cookie notices, promotions. Dismissible and sticky-friendly: pin it to the top of the viewport with a sticky utility class.
Variants
A new component just landed. Read the docs.
SubstrateUI v1.3 is out. See what's new.
We use cookies to improve your experience.
Scheduled maintenance this Sunday at 02:00 UTC.
Import
import { Banner } from "@mikenotthepope/substrateui"Accessibility
The banner is a labelled region, so screen-reader users can navigate to and from it. The dismiss control is a real button with an accessible label; once dismissed, the banner unmounts and returns focus to the normal flow.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "primary" | "info" | "warning" | "default" | Visual intent of the bar. |
dismissible | boolean | true | Show the dismiss button. |
onDismiss | () => void | — | Fired after the user dismisses the banner. |
dismissLabel | string | "Dismiss" | Accessible label for the dismiss button. |
className | string | — | Add `sticky top-0 z-50` to pin it to the top of the viewport. |