AlertDialog

A controlled confirmation dialog for actions that need explicit user approval — especially destructive ones. Renders a modal with a title, optional description, and confirm/cancel actions.

Installation

npm install @bloomkit/react

Usage

import { AlertDialog } from "@bloomkit/react";
 
const [open, setOpen] = useState(false);
 
<AlertDialog
  open={open}
  onOpenChange={setOpen}
  title="Are you sure?"
  description="This action cannot be undone."
  onConfirm={() => setOpen(false)}
  onCancel={() => setOpen(false)}
/>

Danger variant

Use variant="danger" for destructive actions like deleting data. The confirm button turns red.

<AlertDialog
  open={open}
  onOpenChange={setOpen}
  title="Delete account?"
  description="All your data will be permanently removed. This cannot be undone."
  variant="danger"
  confirmLabel="Delete"
  onConfirm={handleDelete}
  onCancel={() => setOpen(false)}
/>

Props

Prop	Type	Default	Description
open	boolean	—	Controlled open state
onOpenChange	(open: boolean) => void	—	Called when the open state should change
title	string	—	Title shown at the top of the dialog. Required — alerts must have a title
description	string	—	Optional secondary description shown under the title
variant	"default" \| "danger"	"default"	Visual variant of the confirm action. Use danger for destructive confirmations
confirmLabel	string	"Confirm"	Text on the confirm button
cancelLabel	string	"Cancel"	Text on the cancel button
onConfirm	() => void	—	Called when the user confirms
onCancel	() => void	—	Called when the user cancels
children	ReactNode	—	Optional custom body between the description and action row
className	string	—	Extra Tailwind classes merged onto the dialog content

PreviousAlertComponents

NextAvatarComponents