Overlays

ConfirmDialog

A constrained alert dialog for confirming one consequential or irreversible action.

ConfirmDialogConfirmDialogProps

Component workbench

Configure the production component, inspect it at responsive widths, copy synchronized JSX, and share the exact state from one workspace.

Generated example

This JSX stays synchronized with the controls and uses only public package APIs.

tsx

'use client';

import { useState } from 'react';
import { Button, ConfirmDialog } from '@ai-created/ui';

export function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open confirmation</Button>
      <ConfirmDialog
        open={open}
        onConfirm={() => setOpen(false)}
        onCancel={() => setOpen(false)}
        title={"Delete project?"} destructive
        description="This action cannot be undone."
      />
    </>
  );
}

Import

tsx

import { ConfirmDialog } from '@ai-created/ui';

Client boundary

Add 'use client' to the file that owns this interactive state.

Install from a reviewed release

Replace the version placeholder with the release tag your product has reviewed.

shell

npm install --install-links "git+https://github.com/TheMarco/ai-created-ui.git#vX.Y.Z"

Load semantic tokens

css

@import '@ai-created/ui/styles/tokens.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

Extend Tailwind

module.exports = {
  presets: [require('@ai-created/ui/tailwind-preset')],
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/@ai-created/ui/src/**/*.{js,ts,jsx,tsx}',
  ],
};

Anatomy

Named regions define what belongs to the component, what remains optional, and where semantic responsibility lives.

Alert dialog

Required

Small Modal composition with alertdialog semantics.

Title

Required

Names the exact action under confirmation.

Description

Optional

Optional consequence and scope explanation.

Cancel action

Required

Safe dismissal path.

button

Confirm action

Required

Executes the consequential operation.

button

Construction and authoring

The Figma-equivalent asset model, auto-layout, resizing, properties, slots, content bounds, localization, and governance contract.

Asset kind

component

Design library name

Components/Overlays/Confirm dialog

Maturity

stable

Last reviewed

2026-08-29

Canvas applicability

Publish standard, destructive, and loading variants with localized copy properties.

Auto layout

Direction: vertical
Gap: 0px regions; 12px between footer actions
Padding: 16px viewport inset; panel region padding
Alignment: Stretch with actions aligned to logical end
Wrap: Actions may wrap at narrow widths

Resizing

Width: fill
Height: hug
Minimum width: 280px
Maximum width: 384px
Minimum height: Content controlled
Maximum height: Viewport minus 32px
Overflow: auto

Exposed design properties

Property	Type	Default	Code mapping	Options or notes
OpenRequired	boolean	false	open	No additional constraint
Destructive	boolean	false	destructive	No additional constraint
Loading	boolean	false	loading	No additional constraint
TitleRequired	text	Confirm action?	title	No additional constraint
Description	slot	None	description	No additional constraint
Confirm label	text	Confirm	confirmLabel	No additional constraint
Cancel label	text	Cancel	cancelLabel	No additional constraint
Loading label	text	Working...	loadingLabel	No additional constraint

Nested assets and slots

Modal family

subcomponent / required

Alert dialog overlay, panel, header, body, and footer.

ModalOverlay and subcomponents

Cancel action

subcomponent / required

Secondary dismissal action.

Button

Confirm action

subcomponent / required

Consequential action and loading state.

Button

Content limits

Title

A direct question, maximum two lines

Overflow: Wrap and revise if longer.

The exact decision must be obvious.

Description

One short paragraph describing consequence

Overflow: Move detailed policy outside the dialog.

Users need enough context to decide without overload.

Action labels

Specific verbs, recommended maximum 24 characters

Overflow: Stack actions if localization requires it.

Specific labels reduce confirmation errors.

Localization and RTL

Translatable: Title, Description, Confirm, cancel, and loading labels

Footer actions follow product locale conventions while preserving safe action hierarchy.
Directional icons, if added, mirror.
Test long destructive verbs.
Test loading announcement and blocked dismissal.
Test 200% zoom.

Responsive behavior

Small modal width with viewport inset.

Parent-selected narrow breakpoint

Allow footer actions to stack full width in a product composition when labels no longer fit.
Do not reorder safe and destructive actions between widths.

Authoring limits

Figma loading variants cannot validate blocked backdrop and Escape dismissal.
The consumer owns asynchronous completion and must clear loading or close the dialog.

Accountable owner

Design systems safety pattern owner

Canonical source: src/components/ConfirmDialog.tsx

Destructive defaults or action ordering changes require safety, content, and accessibility review.
A breaking property, token, or behavior change requires design and engineering approval, a migration note, and a major release.
The design asset, implementation, documentation, accessibility contract, and regression coverage must ship in the same change.

Read the system construction standard

Visual specification

These measurements and semantic tokens define the supported visual contract. Local overrides should preserve the same hierarchy and interaction cues.

Panel width

max 384px

Footer action gap

12px

Header padding

20px horizontal mobile / 24px md; 12px vertical

Body/footer padding

20px horizontal mobile / 24px md; 16px vertical

Close target

44 × 44px

Close glyph

24 × 24px

Close glyph inset

16px from top and logical end

Inherited from the shared overlay header while the dialog is dismissible.

Rules

Name the specific object and action.
Place Cancel before Confirm in the footer.
Use destructive styling only for destructive consequences.

Token dependencies

--color-overlay

Modal backdrop.

--color-surface / --color-border

Panel and dividers.

--color-action-primary

Standard confirmation.

--color-action-destructive

Destructive confirmation.

--color-on-action

Filled action foreground.

--color-text / --color-text2

Title and description.

States and behavior

A component is not complete until its passive, interactive, disabled, and exceptional states remain understandable in both themes.

closed

Trigger: open is false.
Visual response: Nothing is rendered.
Behavior: No focus scope exists.

open

Trigger: open is true.
Visual response: Small alert dialog with cancel and confirm actions.
Behavior: Focus is trapped; dismissal calls onCancel.

loading

Trigger: loading is true.
Visual response: Both actions are disabled and confirm label becomes loadingLabel.
Behavior: Escape, backdrop, header close, cancel, and confirm activation are blocked.
Accessibility: Disabled buttons expose unavailability; the label communicates work in progress.

Accessibility contract

Semantics, accessible naming, keyboard behavior, focus and announcements are implementation requirements, not optional documentation.

Semantics: Headless UI alertdialog composed from Modal primitives.
Accessible name: Required title names the alert dialog; optional Description is associated by Headless UI.

Initial focus should land on the safest useful control for the context; verify Headless UI behavior in integration.
Explain irreversible consequences before the action.
Do not rely on destructive color; button text must be specific.
Expose completion or failure after loading ends.

Keyboard behavior

Escape: Cancels and closes.Only while not loading.
Tab / Shift+Tab: Moves between available actions within the dialog.
Enter / Space: Activates the focused cancel or confirm button.Only while not loading.

Implementation

Use the public package API and preserve the controlled-state, native-attribute, and ref contracts described below.

tsx

import { ConfirmDialog } from '@ai-created/ui';

Client Component required

Returns null while closed.
destructive changes the confirm visual variant; it does not alter semantics.
loading suppresses every dismissal callback and action.
The parent owns async state and closes on success.

tsx

<ConfirmDialog open={open} title="Delete project?" description="This cannot be undone." onConfirm={remove} onCancel={cancel} destructive />

Public API

These props and helpers are compatibility contracts. Changes require migration guidance and release notes.

Prop	Type	Default	Contract
open	boolean	required	Whether the dialog is shown.
onConfirm	() => void	required	Confirm callback.
onCancel	() => void	required	Cancel callback.
title	string	required	Dialog heading.
description	ReactNode	undefined	Supporting explanation.
confirmLabel	string	Confirm	Confirm button label.
cancelLabel	string	Cancel	Cancel button label.
destructive	boolean	false	Uses destructive styling.
loading	boolean	false	Disables dismissal while working.
loadingLabel	string	Working…	Busy button label.

Usage guidance

These rules keep the component recognizable across products without preventing deliberate composition.

Do

Reserve confirmation for meaningful consequences.
Use labels such as Delete project instead of Confirm.

Do not

Do not interrupt routine reversible actions.
Do not allow the dialog to close while its operation is unresolved.

Testing contract

The component should be verified as rendered UI, an interaction model, an accessibility surface, and a theme-aware visual artifact.

Unit

Closed returns null; defaults and destructive variant map correctly.
Loading disables all dismissal paths and changes the label.

Interaction

Cancel, confirm, Escape, backdrop, focus trap, loading, and restoration work.

Accessibility

Alertdialog is named/described and actions have specific names and correct disabled state.

Visual

Capture regular/destructive, description absent/present, loading, long labels, and themes.

Related specifications

modal dialog button