Alert

Installation

$npx shadcn@latest add @reziui/alert

Usage

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

export function Example() {
  return (
    <Alert variant="info">
      <InfoIcon />
      <AlertTitle>New version available</AlertTitle>
      <AlertDescription>Rezi UI 1.5 adds Tabs, Kbd and Alert.</AlertDescription>
    </Alert>
  );
}

The icon is optional — without one the text starts at the left padding. It is centred on the title's first line, not on the whole text block.

Examples

With an action

AlertAction adds a trailing column, vertically centred across the title and description.

Dismissible

AlertDismiss is opt-in. Use it for tips and announcements, not for alerts that tell the user how to recover from an error — that guidance should stay until it is acted on. The alert fades and lifts 4px (150ms, ease-out) before onDismiss runs. When it was dismissed from the keyboard, focus then moves to the first focusable element in the alert's former place — a control you render there instead (like "Show alert again") gets it — so keyboard users keep their place. A mouse click leaves focus alone, so the page never scrolls. With reduced motion it closes instantly.

Variants

Status variants reuse the Badge tint tokens. The title and icon take the status color; the description stays in the foreground color so longer text stays easy to read.

Accessibility

Alert has no live-region role by default, because role="alert" makes screen readers interrupt immediately. Pass role="alert" when an error appears after an action, and role="status" for non-urgent updates. Alerts that are part of the page from the start need neither.

API reference