Banner
Dismissible full-width announcement / promo bar with a CTA.
Import
tsx
import { Banner } from "@cooud-ui/ui";
bash
npx cooud-ui add banner
Examples
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 | — | Right-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". |
children | ReactNode | — | Free-form message body, used when `title`/`description` are not supplied. |
variant | "default" | "brand" | "info" | "success" | "warning" | "error" | "default" | — |
align | "start" | "center" | "center" | — |