Preview

Installation

npx sigma-ui@latest add alert

Usage

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

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

Set variant to default or destructive. An icon placed as the first child of <Alert> is positioned next to the title.

Examples

Basic

Default

Destructive

API Reference

Alert

Props

Prop	Type	Default
variant Visual style of the alert, such as destructive for errors.	"default" | "destructive" | null	-

Slots

Slot	Scope
default The content of the component.	-

AlertTitle

Slots

Slot	Scope
default The content of the component.	-

AlertDescription

Slots

Slot	Scope
default The content of the component.	-

Accessibility

Renders a div with role="alert", so screen readers announce its content. It has no keyboard interactions of its own.

Key	Description
Tab	Moves focus to the next focusable element inside the alert, such as a link or button.