Components
Banner
A page-level notice that stays until the thing it is about changes.
Two vendors renew this month
Datadog and Segment both fall inside the close window.
Three requests have waited five days or more
Sync with the finance ledger failed
SOC 2 evidence accepted
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/banner.jsonPersistent, and scoped to the page
A banner belongs to the thing it is about. It does not time out, and it is not global — that is a Toast.
The tint carries the meaning and the left edge repeats it, so the distinction
survives for anyone who cannot separate the tints. error renders with
role="alert"; the rest are role="status".
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | "info" | "success" | "warning" | "error" | "info" | Sets tint, edge and the announcement role. |
| title | string | — | The headline — often the entire message. |
| action | { label, onClick } | — | One affordance, inline. |
| onDismiss | () => void | — | Adds a close button. Omit for notices that must not be dismissed. |