Displays a callout for user attention.
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.
Copy import { Alert, AlertAction, AlertDescription, AlertTitle, } from "@/components/ui/alert" Copy < Alert > < InfoIcon /> < AlertTitle > Heads up! </ AlertTitle > < AlertDescription > You can add components and dependencies to your app using the cli. </ AlertDescription > < AlertAction > < Button variant = "outline" > Enable </ Button > </ AlertAction > </ Alert > Use the following composition to build an Alert:
Copy Alert ├── Icon ├── AlertTitle ├── AlertDescription └── AlertAction 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.
To enable RTL support, see the RTL configuration guide .
تم الدفع بنجاح
تمت معالجة دفعتك البالغة 29.99 دولارًا. تم إرسال إيصال إلى عنوان بريدك الإلكتروني.
ميزة جديدة متاحة
لقد أضفنا دعم الوضع الداكن. يمكنك تفعيله في إعدادات حسابك.
The Alert component displays a callout for user attention.
The AlertTitle component displays the title of the alert.
The AlertDescription component displays the description or content of the alert.
The AlertAction component displays an action element (like a button) positioned absolutely in the top-right corner of the alert.