Alert

Playground

<Alert>
  <Info />
  <AlertTitle>Your trial ends soon!</AlertTitle>
  <AlertDescription>Upgrade to keep enjoying features.</AlertDescription>
  <AlertHandlers>
    <Button variant="secondary" size="sm" className="w-full">
      Update now
    </Button>
  </AlertHandlers>
</Alert>

Preview

The default type renders a card. Compose it from an icon, AlertTitle, AlertDescription, action buttons in AlertHandlers, and an optional top-right control in AlertAction.

<Alert>
  <Info />
  <AlertTitle>Your trial ends soon!</AlertTitle>
  <AlertDescription>Upgrade to keep enjoying features.</AlertDescription>
  <AlertHandlers>
    <Button variant="secondary" size="sm" className="w-full">
      Update now
    </Button>
  </AlertHandlers>
  <AlertAction>
    <Button variant="ghost" size="icon-xs">
      <X />
    </Button>
  </AlertAction>
</Alert>

Installation

npx shadcn@latest add https://espresso-base-ui.vercel.app/r/alert.json

Usage

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

<Alert variant="info">
  <Info />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>You can compose the parts freely.</AlertDescription>
  <AlertHandlers>
    <Button variant="secondary" size="sm">Got it</Button>
  </AlertHandlers>
</Alert>

Variants

variant sets the tone: default, success, info, warning and destructive. It tints the leading icon – and in the card layout it also recolors the button inside AlertHandlers (background, hover and active states), so you pass a plain secondary Button and the alert themes it.

<Alert variant="success">
  <CheckCircle2 />
  <AlertTitle>Success alert</AlertTitle>
  <AlertDescription>This is a success vertical alert.</AlertDescription>
  <AlertHandlers>
    <Button variant="secondary" size="sm" className="w-full">
      View changes
    </Button>
  </AlertHandlers>
</Alert>

<Alert variant="warning">
  <TriangleAlert />
  <AlertTitle>Unsaved changes</AlertTitle>
  <AlertDescription>Save before navigating away.</AlertDescription>
  <AlertHandlers>
    <Button variant="secondary" size="sm" className="w-full">
      Save now
    </Button>
  </AlertHandlers>
</Alert>

Banner

type="banner" renders a page-wide notice on a neutral bg-input surface. Without AlertHandlers it collapses to a slim single row – the title grows to text-base-plus and AlertAction moves inline at the trailing edge instead of floating top-right.

<Alert type="banner">
  <Info />
  <AlertTitle>Your trial ends soon!</AlertTitle>
  <AlertAction>
    <Button variant="ghost" size="sm">
      Update
    </Button>
    <Button variant="ghost" size="icon-xs">
      <X />
    </Button>
  </AlertAction>
</Alert>

Banner variants

Banners take the same variant values. Tint the text action to match with a text color utility.

<Alert type="banner" variant="success">
  <CheckCircle2 />
  <AlertTitle>Source successfully added</AlertTitle>
  <AlertAction>
    <Button variant="ghost" size="sm" className="text-green-600 dark:text-green-300">
      Explore now
    </Button>
    <Button variant="ghost" size="icon-xs">
      <X />
    </Button>
  </AlertAction>
</Alert>

<Alert type="banner" variant="destructive">
  <XCircle />
  <AlertTitle>Something went wrong</AlertTitle>
  <AlertAction>
    <Button variant="ghost" size="sm" className="text-red-600 dark:text-red-300">
      Retry
    </Button>
    <Button variant="ghost" size="icon-xs">
      <X />
    </Button>
  </AlertAction>
</Alert>

API reference

Alert is a compound component – the root takes the layout and tone props and shares them via context, so AlertTitle and AlertDescription automatically adapt their typography to the active layout. All parts render a div and accept className plus standard div props.

Icon

Pass any icon as a direct child of Alert. A direct svg child is auto-sized to size-4 (unless it carries its own size class) and tinted by the active variant; the title and description shift into the second grid column to sit beside it. Omit the icon and the content spans the full width.

Accessibility & styling hooks

The root renders role="alert", so screen readers announce it as a live status message. Every part exposes a data-slot attribute (alert, alert-title, alert-description, alert-button, alert-action), and the root also reflects its props as data-type and data-variant – target these from CSS for app-level overrides.

The alertVariants cva helper is also exported for building custom alert surfaces with the same layout and tone classes:

import { alertVariants } from "@/components/ui/alert"

<div className={cn(alertVariants({ type: "banner", variant: "info" }))}>
  ...
</div>