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.
A new software update is available. See what's new.
Warning
Your subscription will expire in 3 days. Please renew to continue.
Error
There was a problem processing your request. Please try again.
Installation
Usage
Import the component and pass the required props.
import Alert from "@/components/alert";
export default () => (
<Alert
variant="success"
title="Success"
message="Your changes have been saved successfully."
withIcon
/>
);Examples
With Actions
<Alert
variant="danger"
title="Delete Account"
message="This action cannot be undone. This will permanently delete your account."
actions={{
primary: {
label: "Delete",
onClick: () => console.log("Deleted")
},
secondary: {
label: "Cancel"
}
}}
/>Without Title
<Alert
variant="info"
message="A new software update is available. See what's new."
withIcon
/>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) |
withIcon | boolean | false | Shows an icon |
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) |
Variants
The component includes five semantic variants, each with their own color scheme:
- success: For successful operations or positive feedback
- danger: For errors or destructive actions
- info: For informational messages
- warning: For warnings or important notices
- gray: For neutral or general messages
Accessibility
- Close button includes
aria-labelfor screen readers - Automatically refocuses after closing (reappears after 5 seconds)
- Semantic color coding for different message types