Alert

A semantic feedback container for inline errors, warnings, and status messaging.

displayfeedback

Loading preview...

Installation

Run the following command to add the component to your project:

npx baseui-cn add alert

Usage

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Info } from "lucide-react"

;<Alert>
  <Info className="size-4 text-info" />
  <AlertTitle>Heads up</AlertTitle>
  <AlertDescription>This alert stays inline with your form or settings surface.</AlertDescription>
</Alert>

Variants

Loading preview...

Auth And Settings

Use Alert when the message should stay visible until the user fixes something. That makes it a good fit for auth failures, validation summaries, permissions messaging, and configuration warnings.

Loading preview...

API

Alert

Prop	Type	Default	Description
`variant`	`"default" \| "destructive" \| "info" \| "success" \| "warning"`	`"default"`	Color theme and semantic icon of the alert