Alert

Alert displays an important status message with an optional description and recovery action. The root uses role="alert" so assistive technology can announce urgent updates.

Use it for information that needs immediate attention, such as a failed health check or an interrupted operation. Routine information is usually better presented in a regular status region.

Installation

pnpm dlx shadcn@latest add http://ui.argv-tech.dev/r/alert.json

Usage

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/argv/alert"

<Alert>
    <AlertTitle>Release ready</AlertTitle>
    <AlertDescription>The signed bundle can be deployed.</AlertDescription>
</Alert>

Composition

Alert
├── icon (optional)
├── AlertTitle
├── AlertDescription
└── AlertAction (optional)

Choose variant="default" for general notices and variant="destructive" for errors or dangerous conditions. Keep the title short, then use the description to explain what happened and what the user can do next.

AlertAction can contain a button or link when there is a clear recovery step. Avoid adding several competing actions to one alert.

API Reference

Alert

The root renders a div with role="alert" and forwards native div props.

AlertTitle

Renders a div containing the short summary.

AlertDescription

Renders a div containing supporting detail or recovery guidance.

AlertAction

Renders a div aligned with the message content.

Accessibility

Because the root uses the assertive alert role, mount it in response to information that needs immediate announcement. Repeated or non-urgent updates should use a less disruptive live region.

Do not communicate status with color alone. Pair the visual treatment with a specific title and, when useful, an icon marked aria-hidden="true".