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.
Basic
A basic alert with an icon, title and description.
Account updated successfully
Your profile information has been saved. Changes will be reflected immediately.
Destructive
Use variant="destructive" to create a destructive alert.
Payment failed
Your payment could not be processed. Please check your payment method and try again.
Action
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.
Custom Colors
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.
RTL
Alert follows the document direction; text, icon, and action flip together.
تم الدفع بنجاح
تمت معالجة دفعتك البالغة 29.99 دولارًا. تم إرسال إيصال إلى عنوان بريدك الإلكتروني.
ميزة جديدة متاحة
لقد أضفنا دعم الوضع الداكن. يمكنك تفعيله في إعدادات حسابك.