Skip to content

Alert

Displays a callout for user attention.

Examples

Default

vue
<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components to your app using the cli.
  </AlertDescription>
</Alert>

Destructive

vue
<Alert variant="destructive">
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>
    Your session has expired. Please log in again.
  </AlertDescription>
</Alert>

Props

Alert

PropTypeDefaultDescription
variantdefault | destructivedefaultThe visual style of the alert.

Slots

Alert

SlotDescription
defaultThe content of the alert.

AlertTitle

SlotDescription
defaultThe title of the alert.

AlertDescription

SlotDescription
defaultThe description of the alert.