Banner
An inline banner / callout / alert composed from a status-driven root and slot parts.
Controls
import {
Banner,
BannerAction,
BannerDescription,
BannerTitle,
Button,
} from "raft-ui";
<Banner status="info">
<BannerTitle />
<BannerDescription />
<BannerAction>
<Button />
</BannerAction>
</Banner>Banners stay iconless by default, matching the dominant inline pattern. Compose a direct icon child for the heavier warning surfaces.
A banner is never the primary action on screen, so its buttons never use accent. Use variant="default" for a single action button. When two buttons share the slot, pair variant="ghost" (secondary) with variant="default" (primary). A dismiss-only icon button uses variant="ghost" size="icon-xs".
Text actions inside a banner use Button size="inline" inside BannerDescription. The inline button inherits the description's font size and sits on the baseline.
API#WIP
| Prop | Type | Default | Description |
|---|---|---|---|
status | "default" | "destructive" | "warning" | "info" | "success" | — | Drives the surface color. Source intent="..." maps to destructive / warning / info / success; default covers neutral banners. |
size | "sm" | "md" | "lg" | "md" | Controls padding, icon size, title size, description size, and action affordance. |
...props | useRender.ComponentProps<"div"> | — | Native div attributes plus render. Place an optional SVG icon as a direct child; the root normalizes its size. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Optional bold heading. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Message/content slot. Its font size follows the root size. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Omit<useRender.ComponentProps<"div">, "align"> | — | Trailing slot, pinned right and aligned to the top. |