Alert
React Alert components are used to show important messages or feedback after user actions. They are commonly used to confirm actions, show errors, display warnings, or share system information.
This Alert component is built with React and styled using Tailwind CSS, allowing control over layout, content, and visual style.
Success
Your changes have been saved successfully.
Installation
Install the component using the Tailgrids CLI.
npx @tailgrids/cli add alertAnatomy
Import the component and pass the required props.
import Alert from "@/registry/core/alert";
import { CheckCircle1 } from "@tailgrids/icons";
export default () => (
<Alert
variant="success"
title="Success"
message="Your changes have been saved successfully."
icon={<CheckCircle1 />}
/>
);Examples
Variants
The Alert component includes five semantic variants, each with their own color scheme: success, danger, warning, info, and gray.
Success
Your changes have been saved successfully.
Error
There was a problem processing your request. Please try again.
Warning
Your subscription will expire in 3 days. Please renew to continue.
Information
A new software update is available. See what's new.
Neutral
This is a neutral alert for general information.
With Actions
Alerts can include primary and secondary actions to guide users toward next steps.
Delete Account
This action cannot be undone. This will permanently delete your account.
Without Title
The title prop is optional. When omitted, the message takes precedence and adjusts its styling accordingly.
A new software update is available. See what's new.
API Reference
Alert
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'success', 'danger', 'info', 'warning', 'gray' | 'success' | Sets the alert style |
title | string | - | Optional heading for the alert |
message | string | - | Main Alert message (required) |
icon | ReactNode | - | The icon to render |
open | boolean | true | Control visibility state |
onClose | () => void | - | Callback fired when alert is closed |
actions | object | - | Action buttons configuration |
actions.primary | { label: string; onClick: () => void } | - | Primary action button |
actions.secondary | { label: string } | - | Secondary action button (triggers onClose) |
Accessibility
- Close Button: The close button includes an
aria-label="Close alert"for screen reader accessibility. - Visual Feedback: Semantic color coding provides immediate visual context for the message type.
- Persistence: The component automatically reappears after 5 seconds in this demo format for testing purposes.