Alert

An alert is a callout that surfaces a short, important message inline with the page content. Use it for form-level errors, status banners, or warnings that need to stay visible, not for transient toasts.

For dismissible messages that auto-disappear, use Toast instead.

Preview

Installation

npx shadcn@latest add @cubby-ui/alert

Usage

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/cubby-ui/alert";

<Alert>
  <AlertTitle />
  <AlertDescription />
</Alert>

Composition

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

Examples

Info

Use variant="info" for informational messages.

Success

Use variant="success" to confirm a completed action.

Warning

Use variant="warning" for messages that need attention.

Danger

Use variant="danger" for errors and critical messages.

With Icon

Place an SVG as the first child of Alert to show an icon beside the message.

With Actions

Use AlertAction to add buttons alongside the message.

Without Title

Omit AlertTitle to render a description-only alert.

Accessibility

Each Alert has role="alert", so screen readers announce its content when it appears. Because the variants signal severity through color, pair danger and warning alerts with an icon or explicit wording (such as "Error:") so the meaning carries without color.

API Reference

The Alert is built on top of Base UI's useRender, so every part accepts a render prop for polymorphic rendering. The documentation below covers the custom props specific to our implementation.

Props

Alert

Callout container that surfaces an inline message. Sets role="alert" and accepts a render prop.

AlertTitle

Heading line of the alert. Renders an h4 by default and accepts a render prop.

AlertDescription

Body text of the alert. Renders a div by default and accepts a render prop.

AlertAction

Container for buttons placed alongside the message. Renders a div by default and accepts a render prop.