Confirm Dialog

stableSource

A pre-arranged Modal for confirming or cancelling a single action — title, body slot, and a Cancel/Confirm footer, with the Confirm button's tone following the action (primary, or danger for a destructive one). Composes the registry modal and button components directly rather than introducing new dialog anatomy.

Registry-only

No headless primitive — this component ships only as a copied styled file, so there is no Headless mode. primitiv add confirm-dialog installs it whichever mode you are reading.

Playground

import { ConfirmDialog, ConfirmDialogTrigger, ConfirmDialogContent } from "@/components/ui/confirm-dialog";import { ModalPortal } from "@/components/ui/modal";import { Button } from "@/components/ui/button";
const [open, setOpen] = useState(false);
<ConfirmDialog open={open} onOpenChange={setOpen}>  <ConfirmDialogTrigger asChild>    <Button variant="primary">Publish release</Button>  </ConfirmDialogTrigger>  <ModalPortal forceMount>    <ConfirmDialogContent      title="Publish release?"      tone="default"      size="sm"      confirmLabel="Publish"      onConfirm={() => setOpen(false)}    >      This makes v2.1 available to everyone.    </ConfirmDialogContent>  </ModalPortal></ConfirmDialog>

Density is set by a data-density ancestor — the Context system, not a ConfirmDialog prop.

Installation

npx primitiv add confirm-dialog

pnpm dlx primitiv add confirm-dialog

yarn dlx primitiv add confirm-dialog

bunx primitiv add confirm-dialog

Import

import { ConfirmDialog } from "@/components/ui/confirm-dialog";

No headless primitive — this one ships only as a copied styled surface, so primitiv add is the only way in, whichever mode you are reading.

Anatomy

A pre-arranged Modal. ConfirmDialog and ConfirmDialogTrigger forward Modal's own Root/Trigger; ConfirmDialogContent renders the whole surface — a ModalHeader (title + optional close), a ModalBody slot for your message, and a ModalFooter with Cancel then Confirm. ModalPortal and ModalOverlay are not re-exported — compose them from the modal component, exactly as a plain Modal does.

<ConfirmDialog>  <ConfirmDialogTrigger />  <ModalPortal>    <ModalOverlay />        {/* optional */}    <ConfirmDialogContent />  </ModalPortal></ConfirmDialog>

Props

Generated from the copied file’s props type and contract.json. Never hand-maintained.

ConfirmDialog

Extends HTMLDivElement — every native attribute of that element is accepted and forwarded.

Prop	Type	Default	Description
children	`ReactNode`	—	The modal's sub-components (Trigger, Portal, Overlay, Content, ...).
defaultOpen	`boolean`	`false`	Whether the modal is open on first render. The component owns the flag from then on. Omit for closed-on-mount. Forbidden in controlled mode — use `open` instead.
onOpenChange	`(open: boolean) => void`	—	Called with the new open state whenever it changes (open or close). Optional in uncontrolled mode — useful purely to observe transitions. Called with the requested open state whenever the modal wants to open or close (trigger click, Close button, Esc, click-outside, imperative API). Required in controlled mode.
open	`boolean`	—	Forbidden in uncontrolled mode — use `defaultOpen` instead. The current open state. Must be kept in sync by the parent via `onOpenChange`.
ref	`Ref<ModalImperativeApi>`	—	Ref receiving the imperative `ModalImperativeApiopen/close`.

ConfirmDialogTrigger

Extends HTMLButtonElement — every native attribute of that element is accepted and forwarded.

Prop	Type	Default	Description
asChild	`boolean`	`false`	Render into the consumer's own element (e.g. a router `<Link>`) instead of the default `<button>`, merging the trigger's ARIA wiring, composed event handlers, and ref onto it via the Slot pattern.

ConfirmDialogContent

Extends HTMLDialogElement — every native attribute of that element is accepted and forwarded.

Prop	Type	Default	Description
children (required)	`ReactNode`	—	The dialog's body — the confirmation message, or any richer content. Rendered inside ModalBody`ModalBody`'s own slot.
onConfirm (required)	`() => void`	—	Called when the Confirm button is activated. Does not close the dialog itself — drive `open`/`onOpenChange` (or the imperative `close()` API) from this callback if confirming should dismiss it.
title (required)	`string & ReactElement<unknown, string \| JSXElementConstructor<any>> \| string & Iterable<ReactNode> \| string & ReactPortal \| string & Promise<AwaitedReactNode> \| undefined`	—	The dialog's title, shown in the header next to the optional close button.
cancelLabel	`string`	`"Cancel"`	Cancel button label. The Cancel button always closes the dialog (it is wrapped in `ModalClose asChild`) — there is no separate `onCancel` prop.
confirmLabel	`string`	`"Confirm"`	Confirm button label.
onEscapeKeyDown	`(event: Event) => void`	—	Fires on the dialog's native `cancel` event when the user presses Escape. Call `event.preventDefault()` to veto closing and keep the modal open (e.g. to confirm unsaved changes first).
onPointerDownOutside	`(event: PointerEvent) => void`	—	Fires on a `pointerdown` whose coordinates land outside the dialog's bounding rect — i.e. on the browser-painted `::backdrop`. Call `event.preventDefault()` to veto closing and keep the modal open.
ref	`Ref<HTMLDialogElement>`	—	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
showClose	`boolean`	`false`	Shows a close (×) button in the header, in addition to the Cancel/ Confirm footer actions. Off by default — the exploration found the footer's Cancel action already covers the "back out" affordance for a short confirmation, and a redundant close reads as noise.
size	`"sm" \| "md" \| "lg" \| "xl"`	`"sm"`	Dialog width, forwarded to `ModalContent`'s own `size`; `data-density` scales the padding within each size. Defaults smaller than a plain Modal — a confirmation is a short, low-content surface.
tone	`"default" \| "danger"`	`"default"`	Selects the Confirm button's variant — `default` → `primary`, `danger` → `danger` — so the action's own tone drives the dialog, not a separate colour scheme for the dialog itself.

Styling contract

0 CSS custom properties on .primitiv-confirm-dialog — mode-agnostic. These names are the stable surface; the values are not.

Keyboard

The keyboard model is Modal's — it is a real <dialog> opened with showModal(), so the background is inert: everything behind it leaves the tab order and the accessibility tree.

Key	Behaviour
`Tab` / `Shift+Tab`	Move between Cancel, Confirm and the optional close button, wrapping at each end.
`Escape`	Close the dialog and return focus to the trigger — the Cancel route, from the keyboard.
`Enter` / `Space`	Activate the focused button. `onConfirm` does not close the dialog on its own.

Data attributes

Emitted automatically by the headless primitive — style against these rather than adding your own state classes. Grouped by the part that emits them, since most are emitted by more than one.

ConfirmDialogContent

className: .primitiv-confirm-dialog

Attribute	Value	When
`data-state`	`open` \| `closed`	open / closed

Accessibility

It is a real <dialog> opened with showModal(), inherited wholesale from Modal: the top-layer stacking, the inert background, focus trapping and Escape-to-close all come for free, not from a z-index and an aria-hidden sweep.
The title is the dialog's accessible name — it registers as aria-labelledby, and the body registers as aria-describedby, so both are announced on open. A confirmation with no title is announced as an unnamed dialog, so title is required.
tone changes only the Confirm button's colour, never its accessible name. Colour is not a label, so the button text has to carry the meaning: prefer the verb (Remove, Delete) over OK so a screen-reader user hears the consequence.
onConfirm does not close the dialog — that is deliberate, so you can await an async action first — but it means you own dismissal. Close it from the callback (setOpen(false)), or the reader is left in a dialog that looks like it did nothing.
Focus returns to the trigger on close, every route out included (Cancel, Confirm-that-closes, Escape, the backdrop). If the trigger is gone by then — a row this dialog deleted — move focus somewhere deliberate yourself.
The optional showClose button is icon-only and carries its own aria-label="Close"; the footer's Cancel is the primary, always-present way out.

Examples

Every example below reacts to the density control. Currently showing Styled mode.

Confirming an action

The default shape: a title, a one-line body, and a primary Confirm beside Cancel. onConfirm fires when Confirm is pressed but does not close the dialog itself — drive open/onOpenChange from the callback (here setOpen(false)) so confirming dismisses it. Cancel always closes on its own; it is wrapped in ModalClose.

Density