Alert
FeedbackA component for displaying important messages or feedback. Use alerts to communicate status, warnings, errors, or other important information to users.
Import
import { Alert } from "@/components/ui/alert";Usage
Variants
Different alert styles for various message types
Success
Your changes have been saved successfully.
Error
There was a problem processing your request.
Warning
Please review your settings before continuing.
Info
New features are now available.
Default Alert
Neutral alert for general information
Note
This is a default alert for general information.
Dismissible
Alert that can be closed by the user
Dismissible
Click the close button to dismiss this alert.
Without Title
Simple alert message without title
Changes saved successfully!
An error occurred. Please try again.
API Reference
variant"default""default" | "success" | "error" | "warning" | "info"The visual style indicating alert type
title—stringTitle text for the alert
children—ReactNodeAlert message content
dismissiblefalsebooleanWhether the alert can be dismissed
onDismiss—() => voidHandler called when alert is dismissed
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "success" | "error" | "warning" | "info" | "default" | The visual style indicating alert type |
title | string | — | Title text for the alert |
children | ReactNode | — | Alert message content |
dismissible | boolean | false | Whether the alert can be dismissed |
onDismiss | () => void | — | Handler called when alert is dismissed |