AnnouncementBar
Top-of-app dismissible banner. Tone enum + optional action slot
Interactive-mode
Examples
Info (default)
New version available — refresh to update.
Warning with action
Your trial ends in 3 days.
Danger, non-dismissible
Production database is read-only — maintenance in progress.
Success, no border, gutters off
Saved.
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| AnnouncementBar | Top-of-app banner with a tone-coloured background. The dismiss button hides the bar locally; consumers can persist via the OnDismiss callback. Uses the shared Tone enum and the ToneClasses helper for tonal Tailwind classes. Does NOT expose BgFilled — the tonal background IS the defining visual. |
AnnouncementBar
Top-of-app banner with a tone-coloured background. The dismiss button hides the bar locally; consumers can persist via the OnDismiss callback. Uses the shared Tone enum and the ToneClasses helper for tonal Tailwind classes. Does NOT expose BgFilled — the tonal background IS the defining visual.
| Property | Type | Required | Description |
|---|---|---|---|
| Message | string | Banner text. Rendered in text-sm next to the optional action. | |
| Action | RenderFragment? | Optional action slot rendered next to the message. Typically one Button. | |
| Tone | Tone | Tonal style. Default: Tone.Info. Other values: Success, Warning, Danger, Neutral. Drives background, foreground, and border colours via ToneClasses. | |
| Dismissible | bool | When true (default), shows a close button on the right. Set to false for non-dismissible banners (e.g. critical maintenance notices). | |
| OnDismiss | EventCallback | Fires when the user clicks dismiss. The bar hides itself locally regardless; this callback is for persistence (e.g. setting a cookie so the banner doesn't reappear). | |
| Borders | bool | Toggles border-b (with the tonal border colour). Default: true. | |
| Gutters | bool | Toggles px-4 py-2 gap-3 on the row. Default: true. |