Alert
A prominent message used to communicate important information, warnings, or status updates to the user.
Themes
Controlled state
Slots Example
API Reference
Show types
typescript
/**
* Visual theme used to style the alert
*/
type Theme = 'yellow' | 'blue' | 'red' | 'green'
export interface AlertProps {
/**
* Main heading text of the alert
*/
title: string
/**
* Color theme of the alert
* @default 'blue'
*/
theme?: Theme
/**
* Visual style of the alert container
* @default 'subtle'
*/
variant?: 'subtle' | 'outline'
/**
* Optional supporting text shown below the title
*/
description?: string
/**
* Whether the alert can be closed by the user
* @default false
*/
dismissable?: boolean
}| Prop | Default | Type |
|---|---|---|
title* | — | string Main heading text of the alert |
theme | — | Theme Color theme of the alert |
variant | "subtle" | "subtle" | "outline" Visual style of the alert container |
description | — | string Optional supporting text shown below the title |
dismissable | true | boolean Whether the alert can be closed by the user |
modelValue | true | boolean Controls the visibility of the alert for dismissing or toggling it |
| Slot | Payload |
|---|---|
icon | — Custom icon shown before the content |
description | — Custom description content |
footer | — Footer content shown at the bottom of the alert |
| Event | Payload |
|---|---|
update:modelValue | [value: boolean] Fired when the model value changes. |
dismiss | any[] Fired when the component is dismissed. |