Popconfirm is installed into your project as a file you own. It takes the same props as Ant Design v6's Popconfirm, plus a ref. The kit changes one default: the warning icon comes from your icon pack.
Install
npx antuikit@latest init
npx antuikit@latest add popconfirm
The first command installs AntuikitProvider and the theme tokens, the second adds this component.
Import
From @/components/ui/popconfirm, never from antd. The file lives in your project, so the import is a path, not a package.
import { Popconfirm } from "@/components/ui/popconfirm"
The axes
The props that take one of a fixed set of values. The bubble itself (placement, portal, arrow) works as on Popover.
placement takes twelve values and defaults to top: top, left, right, bottom, topLeft, topRight, bottomLeft, bottomRight, leftTop, leftBottom, rightTop, rightBottom. With autoAdjustOverflow, on by default, a bubble that would leave the screen flips to the other side.
okType takes the older button types and defaults to primary. Use okButtonProps instead, which takes any Button prop and wins over okType.
trigger defaults to click, where Tooltip and Popover open on hover. A confirmation should not appear on hover.
color paints the bubble with a preset name or any CSS color. Check the title, description and both buttons against it.
Flags
Three booleans.
disabled (default false) turns off the bubble, not the trigger. The child still renders and its own onClick still runs, so use it to skip the question. To stop the action, disable the child.
showCancel (default true) shows the Cancel button. Without it the bubble is a notice to acknowledge, but it still closes on a click outside. For something the reader must answer, use Modal.
destroyOnHidden (default false) unmounts the content while closed. Use it only for costly content, since remounting drops the bubble's state, including a loading flag you set by hand.
Slots
The props that take a node. Put your own markup here before reaching for a descendant selector.
children is the trigger, one element. It gets aria-describedby while the bubble is open.
title is the question, and it is required. It takes a node or a function, which runs when the bubble opens.
description sits under the title in a quieter style. With one present the title turns bold, and without one it stays at normal weight.
okText and cancelText take any node and fall back to the locale's OK and Cancel. For the whole app, set locale on ConfigProvider.
icon defaults to the warning icon from your icon pack. Pass icon={null} to remove it. classNames={{ icon: "hidden" }} only hides it and leaves the element in place. A glyph you pass needs className="me-xs" for the same gap as the default one.
Events
onOpenChange
afterOpenChange
onConfirm
onCancel
onPopupClick
Styling
classNames and styles take the same keys, one per part. The bubble renders in a portal, so these are the only way to style it: a descendant selector on className cannot reach it.
1
<Popconfirm
2
classNames={{
3
title: "…",
4
content: "…",
5
}}
6
/>
A Tailwind utility on one of these keys wins without !important. Setting a component token's CSS variable on the root does not work: style the part instead.
API Reference
Popconfirm
Popconfirm's props. Rows marked antuikit in the Version column are added by the kit.