Theme
Banner
A message about the page or a region of it.
Examples
The model worker is offline
Model jobs wait until it reconnects.
Dossier saved
Two sources are older than five years
The harvest failed
OpenReview answered 503 three times.
Props
Banner
A message about the page or a region of it: an error, a warning, a confirmation.
| Prop | Type | Default | Description |
|---|---|---|---|
tone? | "neutral" | "danger" | "warning" | "success" | "info" | "info" | |
title | string | — | |
children? | ReactNode | — | |
action? | ReactNode | — | A button or link that resolves what the banner reports. |
live? | "polite" | "assertive" | — | Announce it to screen readers when it appears after the page loaded: `polite` waits for a pause, `assertive` interrupts and is for errors only. Banners present at load need neither. |
Accessibility
- A banner present when the page loads is plain content. One that appears later sets live: polite (status) or assertive (alert, errors only).
- An icon and a title, not colour alone, say what kind of message it is.