A callout that draws attention to important information.
$ pnpm dlx shadcn@latest add https://dashral.com/r/alert.jsonInstallation
$ pnpm dlx shadcn@latest add https://dashral.com/r/alert.jsonAdds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:
{
"registries": {
"@dashral": "https://dashral.com/r/{name}.json"
}
}Then add components by name:
$ pnpm dlx shadcn@latest add @dashral/alertUsage
import { Alert } from "@/components/dashral/alert"
<Alert color="success" title="Payment received" description="Invoice INV-1048 is paid." />Examples
Colors and variants
Each color brings a fitting icon; variant is soft, outline or solid.
Action and close
action sits at the end; onClose adds a close button.
API reference
Alert
Also takes every prop of <div>(opens in a new tab).
| Prop | Type | Default |
|---|---|---|
title / description | ReactNodeThe headline and the detail (which can hold links and lists). | — |
color | "neutral" | "primary" | "info" | "success" | "warning" | "destructive" | "highlight"What it means; each color brings a fitting icon. | "neutral" |
variant | "soft" | "outline" | "solid"How much it stands out. | "soft" |
icon | ReactNode | falseReplaces the icon; false shows none. | the color's |
action | ReactNodeAt the end, e.g. a button. | — |
onClose | () => voidShows a close button. | — |
closeLabel | stringThe close button's accessible name, in your language. | "Dismiss" |
children | ReactNodeMore content under the description. | — |
classNames | { icon, title, description, action }Classes for each part. | — |
className | stringExtra classes, merged with cn() so yours win. | — |
Accessibility
- Warnings and errors are role="alert", announced when they appear; the rest are role="status".
- Each color has its own icon and the alert a title, so meaning never relies on color alone. The close button is labelled “Dismiss” (closeLabel).