Confirm Dialog

A reusable confirmation dialog for destructive or irreversible actions. Accepts a variant prop to apply destructive styling to the confirm button and supports an async loading state while the action runs.

import { ConfirmDialog } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add confirm-dialog

Import

import.tsx

import { ConfirmDialog } from "@aetherstack/patterns"

Usage

confirm-dialog.tsx

import * as React from "react"
import { ConfirmDialog } from "@aetherstack/patterns"
import { Button } from "@aetherstack/ui"

export function DeleteButton() {
  const [open, setOpen] = React.useState(false)
  const [loading, setLoading] = React.useState(false)

  async function handleConfirm() {
    setLoading(true)
    await deleteAccount()
    setLoading(false)
    setOpen(false)
  }

  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>
        Delete account
      </Button>
      <ConfirmDialog
        open={open}
        onOpenChange={setOpen}
        title="Delete account"
        description="This action cannot be undone."
        confirmLabel="Delete"
        variant="destructive"
        onConfirm={handleConfirm}
        isLoading={loading}
      />
    </>
  )
}

Props

Prop	Type	Default	Description
open*	boolean	—	Controls dialog visibility.
onOpenChange*	(open: boolean) => void	—	Callback to sync the open state.
title*	string	—	Dialog heading.
description*	string	—	Body copy explaining the action.
confirmLabel	string	"Confirm"	Label for the confirm button.
cancelLabel	string	"Cancel"	Label for the cancel button.
variant	"default" \| "destructive"	"default"	Confirm button variant.
onConfirm*	() => void \| Promise<void>	—	Handler called when the user confirms.
isLoading	boolean	false	Shows a spinner on the confirm button while the async action runs.

* Required

Accessibility

→Built on the AlertDialog primitive — uses role="alertdialog" so screen readers announce it immediately.
→Focus is trapped inside the dialog while it is open.
→Escape closes the dialog without confirming the action.
→The confirm button receives focus first to prevent accidental dismissal.