Skip to content
Logobaseui-cn

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:

Terminal
npx baseui-cn add alert

Usage

Code
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

PropTypeDefaultDescription
variant"default" | "destructive" | "info" | "success" | "warning""default"Color theme and semantic icon of the alert

Status variants use your existing success, warning, info and destructive variables on a neutral surface. Include meaningful status text as well as an icon.

For manual installation, copy the stylesheet included with the component source and retain its import. CLI installation includes it automatically; website CSS is not required.