Appearance
Alert
Displays a callout for user attention.
Examples
Default
Heads up!
You can add components to your app using the cli.
vue
<script setup>
import { Alert, AlertTitle, AlertDescription } from '@empathyds/vue'
</script>
<Alert>
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components to your app using the cli.
</AlertDescription>
</Alert>Destructive
Error
Your session has expired. Please log in again.
vue
<script setup>
import { Alert, AlertTitle, AlertDescription } from '@empathyds/vue'
</script>
<Alert variant="destructive">
<AlertTitle>Error</AlertTitle>
<AlertDescription>
Your session has expired. Please log in again.
</AlertDescription>
</Alert>Props
Alert
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | default | destructive | default | The visual style of the alert. |
Slots
Alert
| Slot | Description |
|---|---|
| default | The content of the alert. |
AlertTitle
| Slot | Description |
|---|---|
| default | The title of the alert. |
AlertDescription
| Slot | Description |
|---|---|
| default | The description of the alert. |