GitHub55X

Alert

Vue alert callout to highlight important status, warnings, errors, or success messages in your UI.

PreviousNext

Features

  • Composable — Flexible slot-based layout with Alert.Icon, Alert.Title, and Alert.Description
  • Variants — default, info, success, warning, and destructive styles
  • Accessible — Uses role="alert" for screen reader announcements
  • Icon support — Alert.Icon renders a variant-aware icon automatically

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/alert.json

Usage

      
      <script setup lang="ts">
import { Alert } from "@/components/ui/alert";
</script>

<template>
  <Alert.Root variant="info">
    <Alert.Icon />
    <Alert.Title>Heads up!</Alert.Title>
    <Alert.Description>
      You can add components to your app using the CLI.
    </Alert.Description>
  </Alert.Root>
</template>

Composition

      
      Alert.Root
├── Alert.Icon
├── Alert.Title
└── Alert.Description

Examples

With icon

Alert.Icon picks the icon from the root variant.

Variants

All semantic variants with their default icons.

Destructive

Use variant="destructive" for error or critical messages.

API

PartDescription
Alert.RootRoot container with role="alert". Supports variant prop
Alert.IconVariant-aware icon (size-3.5). Inherits variant from root
Alert.TitleAlert heading
Alert.DescriptionSupporting text or rich content

Variants

VariantIconDescription
defaultBellNeutral callout for general information
infoInfoInformational message with blue styling
successCircle checkPositive confirmation or completed action
warningTriangle alertCaution or attention needed
destructiveCircle alertError or critical failure state
ActionSheetAlert Dialog