Feedback/Alert
Alert
A contextual feedback banner for informational messages, success confirmations, warnings, and error states. Supports an optional dismiss action.
import { Alert } from "@animui/ui"Variants
Four built-in variants — each with a matching icon and color palette.
Your trial expires in 3 days. Upgrade to keep access.
Payment successful
Your subscription has been activated. Welcome aboard!
You have used 90% of your 5 GB quota.
Failed to save changes. Please try again later.
With title
Provide a title prop to add a bold heading above the message body.
Payment successful
Your subscription has been activated. Welcome aboard!
Dismissible
Pass an onClose handler to render a dismiss button. Control visibility with local state.
Heads up
Your trial expires in 3 days. Upgrade to keep access.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "info" | "success" | "warning" | "error" | "info" | Controls the color scheme and icon of the alert. |
title | string | — | Optional bold heading rendered above the message body. |
children | React.ReactNode | — | The message content of the alert. |
icon | React.ReactNode | — | Custom icon. Defaults to a built-in icon matching the variant. |
onClose | () => void | — | When provided, renders a dismiss button in the top-right corner. |
className | string | — | Additional Tailwind classes applied to the alert container. |
Accessibility
- ✓Renders with
role="alert"so screen readers announce it immediately on mount. - ✓Icons are
aria-hidden="true"— the variant is conveyed via color and text, not icon alone. - ✓Dismiss button includes
aria-label="Dismiss"for screen reader context. - ✓Color contrast ratios meet WCAG AA (4.5:1) for all four variant text colors.