Open GitHub repository
ComponentsAlert

Alert

A callout for contextual feedback with semantic variants for information, success, warnings, and errors.

Installation

bunx @swift-rust/ui add alert

Usage

tsx
1import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
2 
3<Alert variant="info">
4  <AlertTitle>Heads up</AlertTitle>
5  <AlertDescription>Your changes were saved.</AlertDescription>
6</Alert>

Composition

Alert is composed of these parts:

Alert
├── Icon
├── AlertTitle
├── AlertDescription
└── AlertAction

Examples

Basic

A basic alert with an icon, title and description.

tsx
1import { CheckCircleIcon } from "lucide-react";
2import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
3 
4<Alert>
5  <CheckCircleIcon />
6  <AlertTitle>Account updated successfully</AlertTitle>
7  <AlertDescription>
8    Your profile information has been saved. Changes will be reflected immediately.
9  </AlertDescription>
10</Alert>

Destructive

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

tsx
1import { AlertCircleIcon } from "lucide-react";
2import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
3 
4<Alert variant="destructive">
5  <AlertCircleIcon />
6  <AlertTitle>Payment failed</AlertTitle>
7  <AlertDescription>
8    Your payment could not be processed. Please check your payment method and try again.
9  </AlertDescription>
10</Alert>

Action

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

tsx
1import {
2  Alert,
3  AlertAction,
4  AlertTitle,
5  AlertDescription,
6} from "@/components/ui/alert";
7import { Button } from "@/components/ui/button";
8 
9<Alert>
10  <AlertTitle>Dark mode is now available</AlertTitle>
11  <AlertDescription>Enable it under your profile settings to get started.</AlertDescription>
12  <AlertAction>
13    <Button size="xs" variant="secondary">Enable</Button>
14  </AlertAction>
15</Alert>

Custom Colors

Customize the alert colors by adding utility classes such as bg-amber-50 dark:bg-amber-950 to the Alert.

tsx
1import { AlertTriangleIcon } from "lucide-react";
2import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
3 
4{/* Override colors with utility classes on the Alert */}
5<Alert className="border-amber-600/40 bg-amber-50 text-amber-900 dark:bg-amber-950 dark:text-amber-100">
6  <AlertTriangleIcon />
7  <AlertTitle>Your subscription will expire in class="text-amber-400">3 days.</AlertTitle>
8  <AlertDescription className="text-amber-800 dark:text-amber-200/90">
9    Renew now to avoid service interruption or upgrade to a paid plan to continue.
10  </AlertDescription>
11</Alert>

RTL

Wrap in dir="rtl" — the icon and layout mirror automatically.

tsx
1import { CheckCircleIcon } from "lucide-react";
2import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
3 
4<div dir="rtl">
5  <Alert>
6    <CheckCircleIcon />
7    <AlertTitle>تم تحديث الحساب بنجاح</AlertTitle>
8    <AlertDescription>تم حفظ معلومات ملفك الشخصي وستظهر التغييرات فورًا.</AlertDescription>
9  </Alert>
10</div>
← AccordionAlert Dialog →