Banner
A full-width announcement bar for the top of a page or app.
import { Banner } from "pleate/banner";Dismissible
Dismissing collapses the bar's height.
Direct trains from Lisbon to Porto are now bookable in the app.
Your trips
Tones
Booking changes are paused on 4 November from 02:00 to 03:00 UTC.
Rail strike in Portugal on 7 November. Some connections may not run.
Your card was declined. The Lisbon hotel hold ends in 2 hours.
Props
- tone
Background tint and icon color.
"neutral" | "accent" | "warning" | "danger"default "neutral"- icon
Leading icon, sized to 16px.
ReactNode- action
A link or small button after the text.
ReactNode- dismissible / onDismiss / dismissLabel
Close button. onDismiss runs once the bar has collapsed.
boolean / () => void / stringdefault false / none / "Dismiss"- sticky
Stick to the top of the scroll container.
booleandefault false- aria-label
Names the region.
stringdefault "Announcement"
Accessibility
- A labelled region, not an alert: it is there on load and is not announced.
- With reduced motion the bar is removed immediately, without the collapse.
- While it collapses the bar is inert, so focus cannot land in it.