Alert

Free · MIT

A message about the page or the work that stays where it is until it no longer applies: a warning before a change, a note that something failed, a fact the person should know. Put an icon first, then AlertTitle and AlertDescription. Its text is plain text from the app, never HTML. An Alert is read out when it appears if its variant is destructive (role "alert"); the other variants are polite (role "status"). Pass role to change that. For a short notice that goes away by itself use a toast; an Alert doesn't dismiss itself.

Markdown

Version 5.2.0· other versions

This page is for 5.2.0, the current release. An earlier release’s page is the Markdown that release published, so the docs match the version you have installed (candor-lock.json records it).

Not in the docs of 1.3.0, 1.4.0, 1.5.0, 1.5.1, 1.6.0, 1.7.0, 1.8.0, 1.8.1, 1.9.0, 1.9.1, 2.0.0, 2.1.0 and 2.2.0: the page came later, or had another name then.

Docs pages weren’t kept for 1.0.0, 1.0.1, 1.1.0, 1.1.1, 1.2.0 and 1.2.1: they are kept from 1.3.0 on, and before that only llms.txt was published.

Preview

Install

With the Candor CLI

Open the starter in StackBlitz

Opens the free starter app in StackBlitz, in your browser, on stackblitz.com. Alert isn’t added for you: run npx candor-ui add alert in its terminal. The starter’s agent needs an Anthropic API key to chat; without one it shows the components only.

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/alert

Brings in: motion, tokens, utils · npm: class-variance-authority@^0.7.1

Usage

TSX · The example above

"use client"

import { CircleAlert, Info, TriangleAlert } from "lucide-react"
import { Alert, AlertDescription, AlertTitle } from "@/components/candor/ui/alert"

export default function Example() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <Alert>
        <Info aria-hidden />
        <AlertTitle>This run is read-only</AlertTitle>
        <AlertDescription>It can look at the records but can't change them.</AlertDescription>
      </Alert>
      <Alert variant="warning">
        <TriangleAlert aria-hidden />
        <AlertTitle>The next step can't be undone</AlertTitle>
        <AlertDescription>Deleting the archive removes 214 files. There is no recovery.</AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <CircleAlert aria-hidden />
        <AlertTitle>The import stopped</AlertTitle>
        <AlertDescription>The service answered with an error after 40 of 120 records. Nothing after record 40 was written.</AlertDescription>
      </Alert>
    </div>
  )
}

<Alert>

Prop	Type	Default	Description
variant	`"default" \| "success" \| "warning" \| "attention" \| "destructive" \| null \| undefined`	—	The kind of message. `destructive` is for a failure or something that can't be undone; `warning` for care before acting; `attention` for something waiting on the person; `success` for a confirmed result. Defaults to a plain card.

Also takes the props of React.ComponentProps<"div">.

<AlertTitle>

The alert's headline: what happened or what to know, in a few words.

No props.

Also takes the props of React.ComponentProps<"div">.

<AlertDescription>

The detail under the title: what it affects and what the person can do. Plain text or any elements; links and buttons keep their own styles.

No props.

Also takes the props of React.ComponentProps<"div">.

Motion

Moment	Family	What it does
enter	arrive, rise	An Alert that appears after the page has drawn rises in over a quarter of a second. One that is there when the page first draws, or that the server rendered, is simply there; after a client-side navigation, an Alert on the new route rises in.

Set with --cd-motion-alert-<moment>-* in your brand file; the families are in the design reference.