Alert

The Alert component is a feedback surface used to communicate important information: success confirmations, warnings, and errors.

It uses semantic tokens (bg-card, border-border, text-muted-foreground) so it stays consistent across themes.

Import

import {
  Alert,
  AlertTitle,
  AlertDescription,
  AlertIndicator,
  AlertContent,
} from "@/components/ui/alert";

Usage

Heads up

This is a neutral message. Use it for non-critical information.

<Alert>
  <AlertTitle>Heads up</AlertTitle>
  <AlertDescription>
    <p>This is a neutral message.</p>
  </AlertDescription>
</Alert>

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

export default function Demo() {
  return (
    <Alert>
      <AlertTitle>Heads up</AlertTitle>
      <AlertDescription>
        <p>This is a neutral message.</p>
      </AlertDescription>
    </Alert>
  );
}

Variants

Use variants to reflect the semantic meaning of the message.

Info

Useful context for the user.

Success

Your changes were saved.

Warning

Something may need attention.

Error

We couldn’t save your changes. Try again.

<Alert variant="success">...</Alert>
<Alert variant="warning">...</Alert>
<Alert variant="destructive" ariaLive="assertive">...</Alert>

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

export default function AlertVariants() {
  return (
    <div className="grid gap-4">
      <Alert variant="success">
        <AlertTitle>Success</AlertTitle>
        <AlertDescription>
          <p>Your changes were saved.</p>
        </AlertDescription>
      </Alert>

      <Alert variant="destructive" ariaLive="assertive">
        <AlertTitle>Error</AlertTitle>
        <AlertDescription>
          <p>We couldn’t save your changes.</p>
        </AlertDescription>
      </Alert>
    </div>
  );
}

Available variants

Variant	Purpose
default / info	Neutral information
success	Confirmation / positive feedback
warning	Risk / attention required
destructive	Error / critical message

With indicator (icon)

Use AlertIndicator + AlertContent to align content. Ideal for icons (Lucide, Heroicons, or custom SVG).

Check your input

Some fields might be incomplete. Review before submitting.

<Alert variant="warning">
  <AlertIndicator aria-hidden>...</AlertIndicator>
  <AlertContent>
    <AlertTitle>...</AlertTitle>
    <AlertDescription><p>...</p></AlertDescription>
  </AlertContent>
</Alert>

import {
  Alert,
  AlertIndicator,
  AlertContent,
  AlertTitle,
  AlertDescription,
} from "@/components/ui/alert";

export default function AlertWithIcon() {
  return (
    <Alert variant="warning">
      <AlertIndicator aria-hidden>{/* icon */}</AlertIndicator>
      <AlertContent>
        <AlertTitle>Check your input</AlertTitle>
        <AlertDescription>
          <p>Review before submitting.</p>
        </AlertDescription>
      </AlertContent>
    </Alert>
  );
}

API

Props

Prop	Type	Default	Description
`variant`	`"default" \| "info" \| "success" \| "warning" \| "destructive"`	`"default"`	Visual semantics
`ariaLive`	`"off" \| "polite" \| "assertive"`	`"polite"`	Screen reader priority
`className`	`string`	—	Tailwind override

The Alert components extend standard HTML props:

React.HTMLAttributes<HTMLDivElement>

TypeScript types

These types define the public API of the Alert component.

export type AlertVariant =
  | "default"
  | "info"
  | "success"
  | "warning"
  | "destructive";

export type AlertAriaLive = "off" | "polite" | "assertive";

Accessibility

Uses role="alert" by default for status messages.
Use ariaLive="polite" for non-blocking updates.
Use ariaLive="assertive" for critical errors.
Avoid placing multiple assertive alerts in the same view.

Design guidelines

Keep alerts short and actionable.
Prefer success only after a user action completes.
Prefer warning when the user can still proceed.
Use destructive for errors that block completion.

Colors

Semantic tokens for borders, surfaces, and state colors.

Typography

Alert title/description rhythm and hierarchy.