[ [UI.15] Components ] Alert

Alert

> Displays a callout for user attention with title and description.

Import

[ [0x5B] IMPORT ]

1import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert"

Preview

[ [0x00] ALERT ]

Heads up!

You can add components to your app using the cli.

1<Alert>
2  <Info className="h-5 w-5" />
3  <AlertTitle>Heads up!</AlertTitle>
4  <AlertDescription>
5    You can add components to your app using the cli.
6  </AlertDescription>
7</Alert>

Variants

[ [0x00] DEFAULT ]

Information

This is a default alert message with important information.

1<Alert>
2  <Info className="h-5 w-5" />
3  <AlertTitle>Information</AlertTitle>
4  <AlertDescription>
5    This is a default alert message with important information.
6  </AlertDescription>
7</Alert>

[ [0x00] DESTRUCTIVE ]

Error

Your session has expired. Please log in again.

1<Alert variant="destructive">
2  <XCircle className="h-5 w-5" />
3  <AlertTitle>Error</AlertTitle>
4  <AlertDescription>
5    Your session has expired. Please log in again.
6  </AlertDescription>
7</Alert>

[ [0x00] SUCCESS ]

Success

Your changes have been saved successfully.

1<Alert variant="success">
2  <CheckCircle2 className="h-5 w-5" />
3  <AlertTitle>Success</AlertTitle>
4  <AlertDescription>
5    Your changes have been saved successfully.
6  </AlertDescription>
7</Alert>

[ [0x00] WITHOUT ICON ]

Note

This alert does not include an icon.

1<Alert>
2  <AlertTitle>Note</AlertTitle>
3  <AlertDescription>
4    This alert does not include an icon.
5  </AlertDescription>
6</Alert>

[ [0x00] TITLE ONLY ]

Important: Maintenance scheduled for tonight

1<Alert>
2  <AlertCircle className="h-5 w-5" />
3  <AlertTitle>Important: Maintenance scheduled for tonight</AlertTitle>
4</Alert>

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
variant	`"default" \| "destructive" \| "success"`	`"default"`	The visual style of the alert.
className	`string`	-	Additional CSS classes to apply to the alert.

Accessibility

[ [0x58] A11Y ]

Uses role='alert' for screen reader announcements
Icons have aria-hidden='true' to avoid redundant announcements
Grid layout ensures proper reading order
Title uses font-semibold for visual hierarchy
Color is not the only means of conveying information

When to Use

[ [0xE9] USAGE GUIDANCE ]

✓ Use Alert when:

• Displaying persistent, important information (errors, warnings, tips)
• User needs to be aware of system state changes
• Information stays visible until user dismisses or takes action
• Context-specific messages within a page section (form validation summary)
• Important announcements that don't require immediate action

✗ Don't use when:

• Temporary feedback for actions (use Toast instead)
• User must confirm before proceeding (use Alert Dialog)
• Field-level validation errors (use Form Error component)
• Full-page blocking messages (use Dialog or dedicated error page)
• Time-sensitive information that auto-dismisses (use Toast)

Variant Selection:

• default: General information, tips, updates
• destructive: Errors, critical warnings, failed operations
• success: Successful operations, confirmations
• Always include an icon matching the variant for quick recognition

Variants

[ [0x00] DEFAULT ]

Information

This is a default alert message with important information.

1<Alert>
2  <Info className="h-5 w-5" />
3  <AlertTitle>Information</AlertTitle>
4  <AlertDescription>
5    This is a default alert message with important information.
6  </AlertDescription>
7</Alert>

[ [0x00] DESTRUCTIVE ]

Error

Your session has expired. Please log in again.

1<Alert variant="destructive">
2  <XCircle className="h-5 w-5" />
3  <AlertTitle>Error</AlertTitle>
4  <AlertDescription>
5    Your session has expired. Please log in again.
6  </AlertDescription>
7</Alert>

[ [0x00] SUCCESS ]

Success

Your changes have been saved successfully.

1<Alert variant="success">
2  <CheckCircle2 className="h-5 w-5" />
3  <AlertTitle>Success</AlertTitle>
4  <AlertDescription>
5    Your changes have been saved successfully.
6  </AlertDescription>
7</Alert>

[ [0x00] WITHOUT ICON ]

Note

This alert does not include an icon.

1<Alert>
2  <AlertTitle>Note</AlertTitle>
3  <AlertDescription>
4    This alert does not include an icon.
5  </AlertDescription>
6</Alert>

[ [0x00] TITLE ONLY ]

Important: Maintenance scheduled for tonight

1<Alert>
2  <AlertCircle className="h-5 w-5" />
3  <AlertTitle>Important: Maintenance scheduled for tonight</AlertTitle>
4</Alert>

Prop

Type

Default

Description

variant

"default" | "destructive" | "success"

"default"

The visual style of the alert.

className

string

Additional CSS classes to apply to the alert.