Alert

Alerts surface important state inside the flow of a page. They are useful when readers need to notice a condition before continuing, but you do not want to interrupt them with a modal or reroute them to a different screen.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

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

<Alert>
  <AlertTitle>Inventory synced</AlertTitle>
  <AlertDescription>
    The launch shelf now reflects the latest warehouse counts.
  </AlertDescription>
</Alert>

Why This Primitive Exists

Status messaging shows up everywhere in operational UI. This primitive gives those moments a shared frame, hierarchy, and spacing so warnings and confirmations stay readable without each page inventing its own banner style.

• Use it for inline state that matters to the current task.
• Prefer it to toast-style feedback when the message should remain visible while the user works.
• Avoid using alerts as general-purpose decoration or marketing callouts.

Examples

Default Status Message

Use the default variant for informative or success-adjacent messages that still need a visible frame.

<Alert>
  <AlertTitle>Draft scheduled</AlertTitle>
  <AlertDescription>
    Publishing will begin when the asset pipeline finishes processing.
  </AlertDescription>
</Alert>

Destructive And High-Risk States

The destructive variant is for conditions that block progress or communicate a damaging failure.

<Alert variant="destructive">
  <AlertTitle>Sync failed</AlertTitle>
  <AlertDescription>
    Pricing data could not be pushed to the storefront.
  </AlertDescription>
</Alert>

In Context

An alert should sit near the form or workflow it affects so the next step remains obvious.

Guidance

Keep The Message Actionable

• Name the issue directly in AlertTitle.
• Use AlertDescription to explain consequence or next step.
• If there is nothing the user can do with the message, a quieter status pattern may be better.

Match Severity Honestly

• Use the default variant for informative or cautionary states.
• Reserve destructive for real blocking errors, destructive consequences, or risk-heavy warnings.
• Do not escalate everything to a danger treatment just to attract attention.

Place Alerts Near The Task

• Put the alert inside the same section or card as the affected form.
• Keep related actions close by when the issue can be resolved immediately.
• If the message interrupts the entire application, that likely calls for a dialog instead.

API Reference

Alert

Alert renders a div with role="alert" and accepts standard React.ComponentProps<"div">.

Exported Slots

All three exports also accept their corresponding native HTML props.