Binhlaig UI Component

Alert

A clear message block for status updates, notices, warnings and errors.

Installation

Initialize Binhlaig UI once, then install Alert with the saved installer.

Initialize first

npx binhlaig-ui@latest init

Terminal

npx binhlaig-ui@latest add alert

Import Alert primitives from your UI directory.

import {
  Alert,
  AlertActions,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert"

Use AlertTitle and AlertDescription to structure a message.

Heads up

You can add components using the Binhlaig UI CLI.

Choose a semantic style that matches the message.

Information

A new update is available.

Success

Your changes were saved.

Warning

Review these settings before continuing.

Error

Something went wrong.

Place an icon before the title for faster visual recognition.

New feature

Drawer is now available in the component registry.

Add relevant actions without turning the alert into a modal.

Unsaved changes

Save your changes before leaving this page.

Replace an older Alert source with the latest registry version.

npx binhlaig-ui@latest add alert --overwrite

Main components and variants available in Binhlaig UI Alert.

Component	Purpose
`Alert`	The semantic message container.
`AlertTitle`	A concise message heading.
`AlertDescription`	Supporting message content.
`AlertActions`	Optional related actions.

Prop	Values	Default
`variant`	default, info, success, warning, destructive	`default`
`role`	Any valid ARIA role	`alert`