Popconfirm

FreeNew

A small confirmation anchored to the control that opened it, with a title, a consequence line and Yes/No actions that stay busy while an async confirm runs.

The full demo as documented.

Customize

Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.

confirmLabel / cancelLabel

destructive

confirmDisabled

side

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac/popconfirm

It builds on the button, popover components, which the CLI installs for you.

Usage

import { Popconfirm } from "@/components/ui/popconfirm"

<Popconfirm
  title="Delete invoice INV-2041?"
  description="The invoice and its payment history will be removed."
  confirmLabel="Delete"
  destructive
  onConfirm={() => deleteInvoice("INV-2041")}
>
  <Button variant="outline">Delete invoice</Button>
</Popconfirm>

Props

Prop	Type	Default	Description
`children`	`ReactElement`	`-`	The trigger element, usually a Button.
`title`	`ReactNode`	`-`	The question.
`description`	`ReactNode`	`-`	One line of consequence.
`onConfirm`	`() => void \| Promise<void>`	`-`	Runs on confirm. A promise keeps the popover open and busy until it settles.
`onCancel`	`() => void`	`-`	Runs when No is chosen.
`confirmLabel / cancelLabel`	`string`	`Yes / No`	Button labels.
`destructive`	`boolean`	`false`	Paints the confirm button as destructive.
`confirmDisabled`	`boolean`	`false`	Disables the confirm button, for example until a reason is typed.
`open / onOpenChange`	`boolean / (open) => void`	`-`	Controlled open state.
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"top"`	Where the popover opens.

Accessibility

Role: alertdialog.

The popover is an alertdialog named by the title and described by the consequence line.
While onConfirm is pending both buttons are disabled and outside clicks and Escape are ignored.
A rejected confirm keeps the popover open so the person can retry.

Keyboard

Enter or Space on the trigger opens it.
Tab moves between No and Yes.
Escape closes it (ignored while the action runs).

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac/popconfirm

It builds on the button, popover components, which the CLI installs for you.

Usage

import { Popconfirm } from "@/components/ui/popconfirm"

<Popconfirm
  title="Delete invoice INV-2041?"
  description="The invoice and its payment history will be removed."
  confirmLabel="Delete"
  destructive
  onConfirm={() => deleteInvoice("INV-2041")}
>
  <Button variant="outline">Delete invoice</Button>
</Popconfirm>

Props

Prop	Type	Default	Description
`children`	`ReactElement`	`-`	The trigger element, usually a Button.
`title`	`ReactNode`	`-`	The question.
`description`	`ReactNode`	`-`	One line of consequence.
`onConfirm`	`() => void \| Promise<void>`	`-`	Runs on confirm. A promise keeps the popover open and busy until it settles.
`onCancel`	`() => void`	`-`	Runs when No is chosen.
`confirmLabel / cancelLabel`	`string`	`Yes / No`	Button labels.
`destructive`	`boolean`	`false`	Paints the confirm button as destructive.
`confirmDisabled`	`boolean`	`false`	Disables the confirm button, for example until a reason is typed.
`open / onOpenChange`	`boolean / (open) => void`	`-`	Controlled open state.
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"top"`	Where the popover opens.

Accessibility

Role: alertdialog.

The popover is an alertdialog named by the title and described by the consequence line.
While onConfirm is pending both buttons are disabled and outside clicks and Escape are ignored.
A rejected confirm keeps the popover open so the person can retry.

Keyboard

Enter or Space on the trigger opens it.
Tab moves between No and Yes.
Escape closes it (ignored while the action runs).