build69
Sign inGet API key
build69  /  Components  /  Overlays  /  Popconfirm

Popconfirm

v1.0.7Updated 27 Aug 2026

Inline confirmation popover for destructive or consequential actions. Wraps any trigger; on open shows a tone-aware icon, title, optional description, and Cancel + Confirm buttons. Async onConfirm shows a loading spinner

View source← Back to catalog

Preview

Live · 10 stories
DefaultOpen ↗
▸Why this is recommendedconfirmdestructivepopoverinline-dialog+3

The default, out-of-the-box Popconfirm.

Recommended for+14
  • ✓Delete buttons in tables and lists
  • ✓Void / cancel / archive actions
  • ✓Any one-click action that needs a lightweight second look without a full Dialog
Tags+6
confirmdestructivepopoverinline-dialogasyncradixdefault
Features+4
  • Tone-aware icon + accent via shared tone recipes (danger default)
  • Sync or async onConfirm with loading state on the confirm button
  • Stays open and shows the rejection message on async error
  • Focus moves to Cancel on open; Escape cancels; dismissal blocked mid-flight
  • Controlled and uncontrolled open state
  • side / align / sideOffset placement
  • disabled prop suppresses opening entirely
  • Custom icon override (or icon={null} to hide)
  • i18n: labels prop overrides the Confirm/Cancel fallbacks and the async-error fallback message; merged over DEFAULT_POPCONFIRM_LABELS (confirmLabel/cancelLabel props win)
Not recommended for−2
  • ✕Multi-field input before confirming (use Dialog or Popover form)
  • ✕Legally significant confirmations that must interrupt (use AlertDialog/Dialog)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Popconfirm" })

Usage

import { Popconfirm } from '@/components/overlays/popconfirm';

<Popconfirm
  title="Delete this invoice?"
  description="This action cannot be undone."
  onConfirm={() => api.deleteInvoice(id)}
>
  <Button tone="danger" emphasis="soft">Delete</Button>
</Popconfirm>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
title

Short question, e.g. "Delete this invoice?"

ReactNodeyes
description

Supporting copy explaining the consequence

ReactNode—
tone

Semantic tone; picks icon + accent (default danger)

'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info'—
onConfirm

Sync closes immediately; async shows loading, closes on resolve, shows error on reject

() => void | Promise<void>—
onCancel

Called on cancel button, Escape, or outside click

() => void—
confirmLabel

Confirm button label (default "Confirm")

ReactNode—
cancelLabel

Cancel button label (default "Cancel")

ReactNode—
disabled

Prevents opening entirely

boolean—
side

Preferred side (default top)

'top' | 'right' | 'bottom' | 'left'—
align

Alignment against the trigger (default center)

'start' | 'center' | 'end'—
open

Controlled open state (defaultOpen for uncontrolled)

boolean—
labels

Override the built-in strings (i18n): Confirm/Cancel fallbacks and the async-error fallback message. Merged over DEFAULT_POPCONFIRM_LABELS

Partial<PopconfirmLabels>—

Every tonal component shares the same tone × emphasis API, so the pair looks identical across Button, Badge, Alert and more.

Related

Platform docsAll componentsSource files