Koala UIAlert
An inline status banner for page-level messages, validation summaries, and contextual feedback. Five semantic variants, optional icon, actions, and a dismiss button.
Installation#
Usage#
import {
Alert,
AlertIcon,
AlertContent,
AlertTitle,
AlertDescription,
AlertActions,
} from "@/components/ui/alert"
export function Example() {
return (
<Alert variant="info">
<AlertIcon />
<AlertContent>
<AlertTitle>Heads up</AlertTitle>
<AlertDescription>This action cannot be undone.</AlertDescription>
</AlertContent>
</Alert>
)
}Variants#
Five semantic variants. Each keeps a neutral surface (border-border on bg-background) and only recolors the leading icon from a single semantic token (--success, --warning, etc.), so the status reads at a glance and re-themes across all four Koala themes automatically.
Sizes#
With icon#
AlertIcon auto-selects the matching Koala icon for the current variant when no children are given. Pass children to use a custom icon instead.
With actions#
Use AlertActions inside AlertContent to add a row of action buttons below the description.
Dismissible#
Pass onDismiss to render a close button. The component is uncontrolled - the consumer manages visibility. Use dismissLabel to provide a screen-reader accessible label (defaults to "Dismiss").
API reference#
Alert
The root, a <div role="alert"> that sets the tone for every part. Forwards all native <div> props. Every part accepts className, merged last.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "info" | "success" | "warning" | "destructive" | "default" | The semantic tone: the icon color and the icon AlertIcon picks on its own. |
| size | "sm" | "md" | "md" | Padding, gap, type and icon size. |
| onDismiss | () => void | - | Renders a close button that calls it. You own the visibility state. |
| dismissLabel | string | "Dismiss" | The accessible label of the close button. |
| CSS variable | Description |
|---|---|
| --surface | Read as the fill, falling back to --background, so the alert takes the ground it sits on. |
AlertIcon
The leading icon column, a sibling of AlertContent. Left empty, it draws the icon of the variant; pass children for a custom one. Forwards all native <div> props.
AlertContent
The text column holding the title, description and actions. Forwards all native <div> props.
AlertTitle
The heading line, a <p>. Forwards all native <p> props.
AlertDescription
The body text, a <p>. Forwards all native <p> props.
AlertActions
A button row, last inside AlertContent. Sizes every control inside it through the control-size context. Forwards all native <div> props.
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "sm" | The size the nested buttons take. |
| Data attribute | Description |
|---|---|
| data-control-size | The size the row hands its controls. |
Anatomy#
import {
Alert,
AlertIcon,
AlertContent,
AlertTitle,
AlertDescription,
AlertActions,
} from "@/components/ui/alert"
<Alert>
<AlertIcon />
<AlertContent>
<AlertTitle />
<AlertDescription />
<AlertActions />
</AlertContent>
</Alert>