Alert
Display important messages and notifications to users.
Preview
Success
Your changes have been saved.
Error
Something went wrong.
Warning
Please review your input.
Info
Here is some information.
Installation
bash
npx auralix-ui add alertUsage
Info Alert
tsx
import { Alert } from "@/components/ui/Alert";
<Alert variant="info">
This is an informational message.
</Alert>Alert with Title
tsx
<Alert variant="success" title="Success!">
Your changes have been saved.
</Alert>Alert Variants
tsx
<Alert variant="success">Success message</Alert>
<Alert variant="error">Error message</Alert>
<Alert variant="warning">Warning message</Alert>
<Alert variant="info">Info message</Alert>Props
| Name | Type | Default | Description |
|---|---|---|---|
variant | "success" | "error" | "warning" | "info" | "info" | The type/color of the alert. |
title | string | - | Optional title for the alert. |
icon | boolean | true | Whether to show the icon. |
children | ReactNode | - | The alert message content. |
Variants
Standard
Standard Alert
This is a standard alert design.
Solid
Solid Alert
This is a solid filled alert design.
Left Accent
Left Accent
This alert features a prominently colored left border.
On this page