Alert

Heads up!

You can add components to your app using the CLI.

<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
</Alert>

Installation

npx bearnie add alert

Usage

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

<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components to your app using the CLI.
  </AlertDescription>
</Alert>

Examples

Destructive

Error

Your session has expired. Please log in again.

<Alert variant="destructive">
  <CircleX class="size-4" />
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
</Alert>

Success

Your changes have been saved successfully.

<Alert variant="success">
  <CircleCheck class="size-4" />
  <AlertTitle>Success</AlertTitle>
  <AlertDescription>Your changes have been saved successfully.</AlertDescription>
</Alert>

Warning

Your account is about to expire.

<Alert variant="warning">
  <TriangleAlert class="size-4" />
  <AlertTitle>Warning</AlertTitle>
  <AlertDescription>Your account is about to expire.</AlertDescription>
</Alert>

Info

A new version is available for download.

<Alert variant="info">
  <Info class="size-4" />
  <AlertTitle>Info</AlertTitle>
  <AlertDescription>A new version is available for download.</AlertDescription>
</Alert>

With Action

Add buttons to alerts for user actions like retry, dismiss, or learn more.

Upload failed

Your file could not be uploaded. Please try again.

<Alert variant="destructive">
  <CircleX class="size-4" />
  <AlertTitle>Upload failed</AlertTitle>
  <AlertDescription class="flex flex-col gap-3">
    <span>Your file could not be uploaded. Please try again.</span>
    <div class="flex gap-2">
      <Button size="xs" variant="outline">Try again</Button>
      <Button size="xs" variant="ghost">Dismiss</Button>
    </div>
  </AlertDescription>
</Alert>

With Close Button

Add a close button to make alerts dismissible.

New feature available

Check out the new dashboard for better insights.

<Alert class="pr-12">
  <Info class="size-4" />
  <AlertTitle>New feature available</AlertTitle>
  <AlertDescription>Check out the new dashboard for better insights.</AlertDescription>
  <Button
    variant="ghost"
    size="xs"
    iconOnly
    class="absolute top-3 right-3"
  >
    <X class="size-4" />
  </Button>
</Alert>

With Link

Include inline links within alert descriptions.

Subscription expiring

Your subscription expires in 3 days. Renew now to avoid interruption.

<Alert variant="warning">
  <TriangleAlert class="size-4" />
  <AlertTitle>Subscription expiring</AlertTitle>
  <AlertDescription>
    Your subscription expires in 3 days. <a href="#" class="font-medium underline underline-offset-4 hover:no-underline">Renew now</a> to avoid interruption.
  </AlertDescription>
</Alert>

Title Only

Compact alert with just a title, no description.

Payment successful

<Alert variant="success">
  <CircleCheck class="size-4" />
  <AlertTitle>Payment successful</AlertTitle>
</Alert>

Description Only

Alert with only a description, no title.

Tip: Press Ctrl + K to open the command menu.

<Alert variant="info">
  <Rocket class="size-4" />
  <AlertDescription>
    Tip: Press <kbd class="px-1.5 py-0.5 text-xs rounded bg-muted font-mono">Ctrl + K</kbd> to open the command menu.
  </AlertDescription>
</Alert>

With List

Alert containing a list of items for multiple messages or requirements.

Password requirements not met

At least 8 characters long
Contains at least one uppercase letter
Contains at least one number
Contains at least one special character

<Alert variant="destructive">
  <ShieldAlert class="size-4" />
  <AlertTitle>Password requirements not met</AlertTitle>
  <AlertDescription>
    <ul class="list-disc list-inside space-y-1 pt-2">
      <li>At least 8 characters long</li>
      <li>Contains at least one uppercase letter</li>
      <li>Contains at least one number</li>
      <li>Contains at least one special character</li>
    </ul>
  </AlertDescription>
</Alert>

Anatomy

Alert - The root container with variant styling
AlertTitle - The heading text
AlertDescription - The descriptive content

Props

Prop	Type	Default	Description
variant	default \| destructive \| success \| warning \| info	default	Visual style variant
class	string	-	Additional CSS classes

AlertTitle

Prop	Type	Default	Description
class	string	-	Additional CSS classes

AlertDescription

Prop	Type	Default	Description
class	string	-	Additional CSS classes

Dependencies

The “With Action” and “With Close Button” examples use the Button component. Install it if you want to use those patterns.