Banner
A tinted horizontal banner row (info / warning / critical / success) with an icon, title, inline description, meta, actions and an optional dismiss — for announcements, releases and verification prompts.
A tinted, horizontal banner row for dashboard headers and home screens: a tone-tinted card with an icon, a title + optional inline description, optional meta (e.g. a timestamp), a trailing actions slot, and an optional dismiss button. It covers announcement / release / verification-style banners with one component.
Presentation only — the host owns fetching, dismiss persistence, and copy. (For a stacked, solid form-message box, use the Alert primitive instead.)
Import
1import { Banner } from "@yuhuanowo/yunui/patterns";Example
tone drives the tint, border, text and icon color (and a default icon). dismissible adds the ✕ button; actions and meta are slots.
Banner
Tones
info · warning · critical · success · neutral. Each sets the tint + a default icon; override the glyph with icon (e.g. a Rocket for a release), or pass icon={null} to omit it.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| actions | ReactNode | — | Trailing actions — links or buttons. |
| className | string | — | |
| description | ReactNode | — | Secondary text shown inline after the title (hidden on mobile). |
| dismissible | boolean | — | Show a dismiss (✕) button. |
| dismissLabel | string | — | |
| icon | ReactNode | — | Leading icon; defaults to a tone-appropriate glyph (pass `null` to omit). |
| meta | ReactNode | — | Small right-aligned meta (e.g. a relative timestamp). |
| onDismiss | (() => void) | — | |
| title* | ReactNode | — | The banner headline. |
| tone | "info" | "warning" | "critical" | "success" | "neutral" | info | Tone — drives the gradient, border, text and icon color. |