Alert
Contextual feedback banner for success, warning, danger, or info.
Installation
npx dafink-ui add alertDemo
Heads up
This is a default alert.
Success
Your changes were saved.
Warning
Review before continuing.
Error
Something went wrong.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'success' | 'warning' | 'danger' | 'default' | Alert color and icon. |
| title | string | undefined | Bold heading text. |
| children | ReactNode | undefined | Body content. |
| className | string | '' | Additional CSS classes. |
Accessibility
Alert's root has role="alert", so assistive technology announces its content as soon as it mounts; the variant icon is aria-hidden="true" and Alert has no keyboard behavior of its own. Only the success variant uses a visually distinct icon (a check-circle) — default, warning, and danger currently share the same triangle-alert icon path, so for those three the required title/body text is what keeps the state from depending on color alone.