Alert

Displays a callout for user attention.

Payment successful

Your payment of $29.99 has been processed. A receipt has been sent to your email address.

New feature available

We've added dark mode support. You can enable it in your account settings.

<Alert>
  <CircleCheckIcon />
  <AlertTitle>Payment successful</AlertTitle>
  <AlertDescription>
    Your payment of $29.99 has been processed. A receipt has been sent to your
    email address.
  </AlertDescription>
</Alert>

<Alert>
  <InfoIcon />
  <AlertTitle>New feature available</AlertTitle>
  <AlertDescription>
    We've added dark mode support. You can enable it in your account settings.
  </AlertDescription>
</Alert>

Installation

pnpm dlx cubix@latest add alert --base radix

Usage

Import

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

Example

<Alert>
  <InfoIcon />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the CLI.
  </AlertDescription>
  <AlertAction>
    <Button variant="outline">Enable</Button>
  </AlertAction>
</Alert>

Composition

Use the following composition to build an Alert:

Composition

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

Basic

A basic alert with an icon, title and description.

Account updated successfully

Your profile information has been saved. Changes will be reflected immediately.

<Alert>
  <CircleCheckIcon />
  <AlertTitle>Account updated successfully</AlertTitle>
  <AlertDescription>
    Your profile information has been saved. Changes will be reflected
    immediately.
  </AlertDescription>
</Alert>

Destructive

Use variant="destructive" to create a destructive alert.

Payment failed

Your payment could not be processed. Please check your payment method and try again.

<Alert variant="destructive">
  <CircleAlertIcon />
  <AlertTitle>Payment failed</AlertTitle>
  <AlertDescription>
    Your payment could not be processed. Please check your payment method
    and try again.
  </AlertDescription>
</Alert>

Action

Use AlertAction to add a button or other action element to the alert.

Dark mode is now available

Enable it under your profile settings to get started.

<Alert className="max-w-md">
  <AlertTitle>Dark mode is now available</AlertTitle>
  <AlertDescription>
    Enable it under your profile settings to get started.
  </AlertDescription>
  <AlertAction>
    <Button size="xs" variant="default">
      Enable
    </Button>
  </AlertAction>
</Alert>

Custom Colors

You can customize the alert colors by adding custom classes such as bg-amber-50 dark:bg-amber-950 to the Alert component.

Your subscription will expire in 3 days.

Renew now to avoid service interruption or upgrade to a paid plan to continue using the service.

<Alert className="max-w-md border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-50">
  <TriangleAlertIcon />
  <AlertTitle>Your subscription will expire in 3 days.</AlertTitle>
  <AlertDescription>
    Renew now to avoid service interruption or upgrade to a paid plan to
    continue using the service.
  </AlertDescription>
</Alert>

RTL

Wrap the alert in dir="rtl" and lang="fa" so layout, action placement, and IRANSans XV follow Persian.

پرداخت موفق

پرداخت ۲۹٫۹۹ دلاری شما انجام شد. رسید به نشانی ایمیل ارسال شده است.

قابلیت جدید در دسترس است

حالت تاریک اضافه شده. می‌توانید آن را از تنظیمات حساب فعال کنید.

<div dir="rtl" lang="fa" className="grid max-w-xl gap-4">
  <Alert>
    <CircleCheckIcon />
    <AlertTitle>پرداخت موفق</AlertTitle>
    <AlertDescription>
      پرداخت ۲۹٫۹۹ دلاری شما انجام شد. رسید به نشانی ایمیل ارسال شده است.
    </AlertDescription>
  </Alert>

  <Alert>
    <InfoIcon />
    <AlertTitle>قابلیت جدید در دسترس است</AlertTitle>
    <AlertDescription>
      حالت تاریک اضافه شده. می‌توانید آن را از تنظیمات حساب فعال کنید.
    </AlertDescription>
  </Alert>
</div>

API Reference

Alert

The Alert component displays a callout for user attention.

Prop	Type	Default	Description
variant	"default" \| "destructive"	"default"	The visual style of the alert.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
...props	React.ComponentProps<'div'>	-	All native div attributes (role, id, aria-*, ...) are forwarded to the rendered element.

AlertTitle

The AlertTitle component displays the title of the alert.

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

AlertDescription

The AlertDescription component displays the description or content of the alert.

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

AlertAction

The AlertAction component displays an action element (like a button) positioned absolutely in the top-end corner of the alert.

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).