Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA page-wide announcement bar with a tone icon, title, description, optional action and an optional dismiss button.
Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.
import { Banner } from "@/components/ui/banner"<Banner
title="Scheduled maintenance on Sunday."
description="Sync pauses from 02:00 to 03:00 UTC."
tone="warning"
dismissible
/>| Prop | Type | Default | Description |
|---|---|---|---|
title | string | - | Headline. Also the accessible name of the section. |
description | React.ReactNode | - | Supporting text. |
tone | "info" | "success" | "warning" | "info" | Sets the icon and colors. |
action | React.ReactNode | - | Link or button shown after the text. |
dismissible | boolean | false | Shows a dismiss button. |
visible | boolean | - | Controlled visibility. |
defaultVisible | boolean | true | Initial visibility when uncontrolled. |
onVisibleChange | (visible: boolean) => void | - | Called when the banner is dismissed. |
Also accepts all <section> props.