An inline message in a tone (info, success, warning, danger) or a quiet legal box for fixed wording, with an action and dismiss.
Alert sits in the flow of a page or form. It carries a title, body, an action (a retry), a badge and an optional reference code for approved wording. live makes it announce when it appears.
Installation
npx shadcn@latest add KezLahd/rime/alertAlso installs: base, icon.
Usage
import { Alert } from "@/components/ui";
<Alert tone="warning" title="Payment is processing">We will email you when the bank confirms it.</Alert>Examples
Tones
Payment is processing
Couldn't save
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
Alert
| Prop | Type | Default | Description |
|---|---|---|---|
| toneRequired | AlertTone | ||
| title | ReactNode | ||
| children | ReactNode | ||
| action | ReactNode | A button or link on the right (desktop) or below (mobile). | |
| icon | ReactNode | false | ||
| badge | ReactNode | Small uppercase tag before the title: "Cold chain", "Awaiting MLR". | |
| jobCode | string | legal only: the approval job code, set in mono under the copy. | |
| live | boolean | Announce on appearance. Use for banners that appear in response to an action (a failed save), not for ones present on page load. | |
| onDismiss | () => void | ||
| className | string |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --alert-radius | var(--r-md) | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --blur-callout | tokens.css | … |
| --border-w | tokens.css | … |
| --danger-fill | tokens.css | … |
| --danger-ink | tokens.css | … |
| --danger-line | tokens.css | … |
| --density | tokens.css | … |
| --focus-ring | tokens.css | … |
| --font-mono | tokens.css | … |
| --info-ink | tokens.css | … |
| --ink-body | tokens.css | … |
| --ink-heading | tokens.css | … |
| --ink-muted | tokens.css | … |
| --line-brand | tokens.css | … |
| --r-2xs | tokens.css | … |
| --r-md | tokens.css | … |
| --r-xs | tokens.css | … |
| --rgb-brand | tokens.css | … |
| --rgb-brand-deep | tokens.css | … |
| --rgb-support | tokens.css | … |
| --rgb-support-deep | tokens.css | … |
| --rgb-white | tokens.css | … |
| --success-fill | tokens.css | … |
| --success-ink | tokens.css | … |
| --success-line | tokens.css | … |
| --text-body | tokens.css | … |
| --text-micro | tokens.css | … |
| --text-small | tokens.css | … |
| --warning-fill | tokens.css | … |
| --warning-ink | tokens.css | … |
| --warning-line | tokens.css | … |
Accessibility
- live renders role="alert" (danger and warning) or role="status" (the rest); without live it is plain content, so it is not re-announced on every render.
Do and don't
Do
- Say what happened and what to do next.
Don't
- Don't use an Alert for transient confirmation; that is a toast.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open alert.md