Alert

Inline message for status, warnings, or callouts. Two visual variants and slots for an icon, title, and description.

Demo

Alerts with an icon, title and description.

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.

Import the parts you need from the component's folder.

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

A basic alert with an icon, title and description.

Account updated successfully

Your profile information has been saved. Changes will be reflected immediately.

Use variant="destructive" to create a destructive alert.

Payment failed

Your payment could not be processed. Please check your payment method and try again.

Use AlertAction to add a button or other action element to the alert.

Dark mode is now available

Enable it under your profile settings to get started.

You can customize the alert colors by adding custom classes such as bg-amber-50 dark:bg-amber-950 to the Alert component.

Your subscription will expire in 3 days.

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

Alert follows the document direction; text, icon, and action flip together.

تم الدفع بنجاح

تمت معالجة دفعتك البالغة 29.99 دولارًا. تم إرسال إيصال إلى عنوان بريدك الإلكتروني.

ميزة جديدة متاحة

لقد أضفنا دعم الوضع الداكن. يمكنك تفعيله في إعدادات حسابك.

Prop	Type	Default	Description
`variant`	`"default" \| "destructive"`	`"default"`	Visual tone.
`class`	`string`	—	Extra classes, merged with cn().

Prop	Type	Default	Description
`class`	`string`	—	Override typography or spacing.

Prop	Type	Default	Description
`class`	`string`	—	Extra classes. Pins its content to the alert's top-right; the alert reserves trailing space automatically.