Banner
Dismissible full-width announcement / promo bar with a CTA.
Import
tsx
import { Banner } from "@cronus-ui/ui";
bash
npx cronus-ui add banner
Examples
.cronus
The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.
default.cronus
app "audit-fixtures" {
port 5176
}
style {
preset aurora
theme dark
}
component BannerDefault layout:inline style:banner {
label "New pricing"
}
page "/audit/banner/default" type:custom {
use BannerDefault
}
API Reference
Generated from the component's exported types.
BannerProps
Extends Omit<HTMLAttributes<HTMLElement>, "title">, VariantProps<typeof bannerVariants>
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | — | Headline text. Pair with `description`, or omit and pass `children`. |
description | ReactNode | — | Optional secondary line shown after the title. |
icon | ReactNode | — | Leading glyph rendered before the message (e.g. a lucide icon). |
action | ReactNode | — | End-aligned call to action (a , link, etc.). |
dismissible | boolean | true | Render a trailing close button. Defaults to `true`. |
onDismiss | () => void | — | Fired after the banner is dismissed (controlled or not). |
open | boolean | — | Controlled visibility. When provided, the component is fully controlled. |
defaultOpen | boolean | true | Initial visibility for the uncontrolled case. Defaults to `true`. |
label | string | "Announcement" | Accessible label for the announcement region. Defaults to "Announcement". |
labels | { dismiss?: string } | — | Override the dismiss button's accessible name. Defaults to `{ dismiss: "Dismiss" }`. |
children | ReactNode | — | Free-form message body, used when `title`/`description` are not supplied. |
variant | "default" | "brand" | "info" | "success" | "warning" | "error" | "default" | One of "default" | "brand" | "info" | "success" | "warning" | "error". |
align | "start" | "center" | "center" | One of "start" | "center". |
asChild | boolean | — | Render as the child element via Slot. |
className | string | — | Additional class names merged onto the root. |
id | string | — | DOM id of the root element. |