Alert

Calls out something the reader should know, inline with the page.

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>  <HugeiconsIcon icon={CheckmarkCircle02Icon} />  <AlertTitle>Payment successful</AlertTitle>  <AlertDescription>    Your payment of $29.99 has been processed. A receipt has been sent to your    email address.  </AlertDescription></Alert>

Installation

$ npx shadcn@latest add @constella/alert

Usage

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

<Alert>  <HugeiconsIcon icon={InformationCircleIcon} />  <AlertTitle>Heads up!</AlertTitle>  <AlertDescription>    You can add components and dependencies to your app using the CLI.  </AlertDescription></Alert>

Composition

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

Color

Use the color prop to color the icon. The title and description stay neutral.

Saved

Your changes have been saved.

Heads up

Maintenance is scheduled for Sunday at 2am.

Almost out

You've used 90% of your monthly quota.

Payment failed

We couldn't charge your card. Update it to keep access.

Color	Icon color
`success`	Green
`info`	Blue
`warning`	Amber
`danger`	Red

<Alert color="danger">  <HugeiconsIcon icon={AlertCircleIcon} />  <AlertTitle>Payment failed</AlertTitle></Alert>

Alert Title

An alert can be a title alone, a description alone, or skip the icon; the text takes the room that's left.

Your changes are live.

Exports run overnight. You'll get an email with a download link when yours is ready, usually before 9am in your time zone.

No icon

Without an icon, the text takes the full width.

<Alert color="success">  <HugeiconsIcon icon={CheckmarkCircle02Icon} />  <AlertTitle>Your changes are live.</AlertTitle></Alert>

Alert Action

Use AlertAction for a button at the alert's end.

Dark mode is now available

Enable it under your profile settings to get started.

<Alert>  <AlertTitle>Dark mode is now available</AlertTitle>  <AlertAction>    <Button size="sm" variant="outline">      Enable    </Button>  </AlertAction></Alert>

API Reference

Part	Adds
`Alert`	`color`: `"success"`, `"info"`, `"warning"` or `"danger"`; `role="alert"`
`AlertTitle`	`render`, to make it a heading: `render={<h3 />}`

Every part takes sx, applied last, and renders a div. For render, see Base UI useRender.