Alert

Displays a callout for important messages — success, info, or errors — with optional icon, title, description, and action.

Default

Neutral callout for success or informational messages.

Installation

CLI

npx @sonojs/ui@latest add alert

Usage

alert.tsx

import { AlertCircleIcon } from "lucide-react"
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert"

export function Example() {
  return (
    <Alert variant="destructive">
      <AlertCircleIcon />
      <AlertTitle>Error</AlertTitle>
      <AlertDescription>
        Your session has expired. Please log in again.
      </AlertDescription>
    </Alert>
  )
}

Props

Prop	Type	Default	Description
variant	"default" · "destructive"	"default"	Visual style. Destructive uses destructive color for title, icon, and description; border stays neutral.