Alert
Callout for important messages
Usage
tsx
import { Alert, AlertTitle, AlertDescription } from '@tryvienna/ui'
<Alert className="w-96">
<InfoIcon />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>You can add components to your app using the CLI.</AlertDescription>
</Alert>Examples
Default
tsx
<Alert className="w-96">
<InfoIcon />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>You can add components to your app using the CLI.</AlertDescription>
</Alert>Destructive
tsx
<Alert variant="destructive" className="w-96">
<AlertCircleIcon />
<AlertTitle>Error</AlertTitle>
<AlertDescription>Your session has expired. Please log in again.</AlertDescription>
</Alert>Warning
tsx
<Alert className="w-96">
<AlertTriangleIcon />
<AlertTitle>Warning</AlertTitle>
<AlertDescription>
This action cannot be undone. Please proceed with caution.
</AlertDescription>
</Alert>Without Icon
tsx
<Alert className="w-96">
<AlertTitle>Note</AlertTitle>
<AlertDescription>This is a simple alert without an icon.</AlertDescription>
</Alert>Variants
| Name | Options | Default |
|---|---|---|
variant | default | destructive | default |
API Reference
Alert
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | null | undefined | - |
Also accepts all props from div.
AlertTitle
Also accepts all props from div.
AlertDescription
Also accepts all props from div.
Data Attributes
| Component | data-slot |
|---|---|
Alert | "alert" |
AlertTitle | "alert-title" |
AlertDescription | "alert-description" |