Alert
An inline message that needs attention but not a dialog.
Usage
import { Alert, AlertAction, AlertDescription, AlertTitle } from "@kanzo-tech/ui";Variants
Five, and the colours are the point: they come from the status token families
(destructive / info / success / warning), so an alert re-skins with the theme and never
carries a raw palette colour.
Choosing between them is about what the reader must do, not about how bad it feels:
| Variant | Use when |
|---|---|
default | Nothing is wrong. Context, a tip, a neutral notice. |
info | Useful context the user did not ask for. |
success | Something finished. There is nothing to do. |
warning | Proceeding is allowed, but it has a consequence. |
destructive | Something failed, or is about to be lost. |
For an error that belongs to one field, use FieldError instead —
an Alert above the form cannot tell the user which input is wrong.
Actions
AlertAction is a slot, not a decoration: Alert is a grid, and it grows its trailing auto
column only when an AlertAction is present. Which column the actions land in follows what
precedes them — after an icon and a title it is column three, after a description alone it is
column two — so a leading icon never leaves a hole. Below sm the actions wrap under the text
instead of competing with it for width.
Put Buttons inside it. ghost buttons pick up a hover tint from the alert's own variant, so a
secondary action in a destructive alert does not hover grey.
API Reference
alertVariants is exported for putting an alert's surface on an element of your own: the grid that places an icon, a body and an action is in the base, so a hand-rolled box keeps the same layout and not only the same colours.
Alert
| Prop | Type | Default |
|---|---|---|
variant | "default" | "info" | "success" | "warning" | "destructive" | "default" |
role follows variant: destructive announces as alert (assertive), everything else as
status (polite). Pass role to override it.
AlertTitle / AlertDescription / AlertAction
Plain ark.divs — they carry no props of their own, only the grid placement described above.