Binhlaig UI Component

Alert Dialog

Alert Dialog interrupts the user with an important confirmation before a destructive or irreversible action.

Installation

Initialize Binhlaig UI, then install Alert Dialog using your preferred installer.

Initialize the project first

Initialization prepares the shared theme, utility file and required dependencies.

npx binhlaig-ui@latest init

Terminal

npx binhlaig-ui@latest add alert-dialog

Native Beta fetches Alert Dialog and its registry dependencies directly from the Binhlaig registry.

Import

Import the Alert Dialog primitives from your UI components directory.

Terminal

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";

Usage

Use Alert Dialog for actions that require explicit confirmation.

Destructive Action

Use a danger action when deleting data or an account.

Sign Out Confirmation

Confirm before ending the current user session.

Warning Dialog

Use warning styling for risky but reversible actions.

Controlled State

Control the dialog state from your own React state.

Update or Overwrite

Replace an older Alert Dialog source with the latest registry version.

Save custom changes before overwriting the installed file.

Terminal

npx binhlaig-ui@latest add alert-dialog --overwrite

API Reference

Components available in the Binhlaig UI Alert Dialog.

Component	Purpose	Description
`AlertDialog`	`Root`	Controls open state and coordinates all dialog parts.
`AlertDialogTrigger`	`Trigger`	Opens the alert dialog.
`AlertDialogContent`	`Content`	Renders the modal overlay and dialog panel.
`AlertDialogHeader`	`Layout`	Groups the title and description.
`AlertDialogTitle`	`Heading`	Provides the accessible dialog title.
`AlertDialogDescription`	`Description`	Explains the action and its consequences.
`AlertDialogFooter`	`Layout`	Groups confirmation and cancellation actions.
`AlertDialogCancel`	`Cancel`	Closes the dialog without confirming.
`AlertDialogAction`	`Confirm`	Confirms the requested action.

Previous component

Tabs

All components