Alert

PreviousNext

A contextual message that provides important information to users about their actions or the state of the system.

Component alert-demo not found in registry.

Installation

pnpm dlx shadcn@latest add alert

Usage

Component alert-basic not found in registry.

Features

  • Multiple variants: Filled, light, muted, and outlined styles
  • Status types: Error, warning, success, info, and feature alerts
  • Size options: Extra small, small, and large sizes
  • Icon support: Optional icons for visual context
  • Dismissible: Optional close button functionality
  • Flexible content: Support for complex layouts and actions
  • Accessible: Proper ARIA attributes and semantic structure

Variants

Visual Variants

Component alert-variants not found in registry.

Status Types

Component alert-statuses not found in registry.

Sizes

Component alert-sizes not found in registry.

Examples

Examples

Component alert-basic not found in registry.

Component alert-dismissible not found in registry.

Component alert-complex not found in registry.

Props

Alert.Root

This component provides a customizable alert container with support for different variants, statuses, and sizes.

Prop

Type

Default

variant
filled
light
muted
outlined
filled
status
error
warning
success
information
feature
information
size
xsmall
small
large
small
onClose
() => void
-
className
string
-
children
ReactNode
-