Alert

Displays a callout for user attention with multiple variants (default, destructive). Includes AlertTitle and AlertDescription for structured content.

Figma: DS-001 Foundations · 26:160

Import

Live Demo

Alert variants for different message types.

Default

Success! Your changes have been saved.

This is an alert with icon, title and description.

This one has an icon and a description only. No title.

This one has a description only. No title. No icon.

Let's try one with icon and title.

This is a very long alert title that demonstrates how the component handles...

This is a very long alert description that demonstrates how the component handles extended text content and potentially wraps across multiple lines

This is an extremely long alert title that spans multiple lines to demonstrate how...

This is an equally long description that contains detailed information about the alert. It shows how the component can accommodate extensive content while preserving proper spacing, alignment, and readability across different screen sizes and viewport widths. This helps ensure the user experience remains consistent regardless of the content length.

Destructive

Something went wrong!

Your session has expired. Please log in again.

Unable to process your payment.

Please verify your billing information and try again.

Check your card details
Ensure sufficient funds
Verify billing address

With Action

The selected emails have been marked as spam.

Dark mode is now available

Enable it under your profile settings to get started.

Different Icons

Payment successful

Your payment of $29.99 has been processed. A receipt has been sent to your email address.

New feature available

We've added dark mode support. You can enable it in your account settings.

Warning

Your subscription will expire in 3 days.

Renew now to avoid service interruption or upgrade to a paid plan to continue using the service.

Props

Name	Type	Default	Description
variant	"default" \| "destructive"	"default"	Visual style of the alert

Examples

Default Alert

Destructive Alert

For error messages and critical warnings.