AlertDialog

The AlertDialog component is a specialized variant of Dialog designed for scenarios where users need to confirm or cancel potentially destructive or irreversible actions. It provides a consistent and accessible interface with built-in support for different themes and loading states.

Usage

import { AlertDialog } from "@harnessio/ui/components";

// ...

return (
  <AlertDialog.Root
    onConfirm={() => handleDelete()}
    theme="danger"
  >
    <AlertDialog.Trigger asChild>
      <Button>Delete Item</Button>
    </AlertDialog.Trigger>

    <AlertDialog.Content title="Confirm Deletion">
      Are you sure you want to delete this item?
      <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
      <AlertDialog.Confirm>Delete</AlertDialog.Confirm>
    </AlertDialog.Content>
  </AlertDialog.Root>
)

Themes

Loading State

Anatomy

All parts of the AlertDialog component can be imported and composed as required.

<AlertDialog.Root>
  <AlertDialog.Trigger />
  <AlertDialog.Content title="Title">
    {/* Dialog content */}
    <AlertDialog.Cancel />
    <AlertDialog.Confirm />
  </AlertDialog.Content>
</AlertDialog.Root>

API Reference

Root

Controls the dialog behavior and provides context for theme and action handlers.

Prop	Required	Default	Type
onConfirm	true		() => void
onCancel	false		() => void
theme	false		'default' | 'warning' | 'danger'
open	false		boolean
onOpenChange	false		(open: boolean) => void
loading	false		boolean
children	true		ReactNode

Content

The main container for the alert dialog content.

Prop	Required	Default	Type
title	true		string
children	false		ReactNode

Trigger

Wraps a control element that opens the dialog. Use asChild prop to customize the trigger element.

Prop	Required	Default	Type
asChild	false		boolean
children	true		ReactNode

Cancel

Optional cancel button. If not provided, a default “Cancel” button will be rendered.

Prop	Required	Default	Type
children	false		ReactNode

Confirm

Optional confirm button. If not provided, a default “Confirm” button will be rendered.

Prop	Required	Default	Type
children	false		ReactNode