Alert

Success! Your changes have been saved

This is an alert with icon, title and description.

New feature preview enabled

Unable to process your payment.

Please verify your billing information and try again.

Check your card details
Ensure sufficient funds
Verify billing address

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

<div class="grid w-full max-w-xl items-start gap-4">
  <Alert>
    <Icon name="circle-check" />
    <AlertTitle>Success! Your changes have been saved</AlertTitle>
    <AlertDescription>
      This is an alert with icon, title and description.
    </AlertDescription>
  </Alert>
  <Alert>
    <Icon name="popcorn" />
    <AlertTitle>New feature preview enabled</AlertTitle>
  </Alert>
  <Alert variant="destructive">
    <Icon name="circle-alert" />
    <AlertTitle>Unable to process your payment.</AlertTitle>
    <AlertDescription>
      <p>Please verify your billing information and try again.</p>
      <ul class="list-inside list-disc text-sm">
        <li>Check your card details</li>
        <li>Ensure sufficient funds</li>
        <li>Verify billing address</li>
      </ul>
    </AlertDescription>
  </Alert>
</div>

Installation

npx shadcn@latest add @fulldev/alert

Usage

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

<Alert variant="default">
  <Terminal />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    Install components through the CLI and keep the source in your project.
  </AlertDescription>
</Alert>

Example

Use AlertAction when the alert should include a secondary control such as a button.

New version available

Install the latest update to get bug fixes and performance improvements.

---
import {
  Alert,
  AlertAction,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert"
import { Button } from "@/components/ui/button"
---

<Alert>
  <AlertTitle>New version available</AlertTitle>
  <AlertDescription>
    Install the latest update to get bug fixes and performance improvements.
  </AlertDescription>
  <AlertAction>
    <Button size="sm" variant="outline">Enable</Button>
  </AlertAction>
</Alert>

Composition

Use the following composition to build an Alert:

Alert
├── Icon
├── AlertTitle
├── AlertDescription
└── AlertAction

Notes

Use Alert for inline feedback inside the page flow.
Use variant="destructive" for error or warning states that need stronger emphasis.
For destructive confirmation flows, use Alert Dialog instead.

API Reference

See the GitHub source code for more information on props.

Sidebar

Search