# antuikit / Popconfirm

> Popconfirm with its warning icon drawn from your icon pack, and an OK button that keeps its size and place while it loads.

Docs: https://antuikit.com/docs/components/popconfirm

## Install

npx antuikit@latest init
npx antuikit@latest add popconfirm

## Import

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

## Demos

- [Basic](https://ui.antuikit.com/embed/popconfirm/basic.md): Wrap a button in `Popconfirm` and give it a `title` to ask before the action runs, with `onConfirm` and `onCancel` for each answer.
- [With a description](https://ui.antuikit.com/embed/popconfirm/description.md): Add a `description` under the `title` to say what happens next, like what else a delete removes.
- [Placement](https://ui.antuikit.com/embed/popconfirm/placement.md): Set `placement` to open the bubble on any of twelve sides and corners of its trigger, and it flips when it would leave the screen.
- [Custom icon](https://ui.antuikit.com/embed/popconfirm/icon.md): Pass `icon` a node to replace the warning glyph, like a red error icon for a delete.
- [Without an icon](https://ui.antuikit.com/embed/popconfirm/no-icon.md): Set `icon={null}` to leave the glyph out, for a question that needs no warning.
- [Button props](https://ui.antuikit.com/embed/popconfirm/buttons.md): Pass `okButtonProps` and `cancelButtonProps` to style either button, like a red Delete or a quieter text Cancel.
- [No cancel button](https://ui.antuikit.com/embed/popconfirm/no-cancel.md): Set `showCancel={false}` to show a single button, for a notice the reader only has to acknowledge.
- [Button labels](https://ui.antuikit.com/embed/popconfirm/locale.md): Set `okText` and `cancelText` to name the buttons after the action, as plain text or a node with an icon.
- [Controlled loading](https://ui.antuikit.com/embed/popconfirm/async-close.md): Hold `open` yourself and set `okButtonProps.loading` while the request runs, then close the bubble when it finishes.
- [Async confirm](https://ui.antuikit.com/embed/popconfirm/promise-close.md): Return a Promise from `onConfirm` and the OK button shows a spinner until it settles, then the bubble closes.
- [Failed confirm](https://ui.antuikit.com/embed/popconfirm/promise-reject.md): Reject the Promise from `onConfirm` to keep the bubble open after a failed request, so the reader can try again.
- [Acknowledgement](https://ui.antuikit.com/embed/popconfirm/ack.md): Pair `showCancel={false}` with a success `icon` to turn the bubble into a short confirmation that something worked.
- [Conditional confirm](https://ui.antuikit.com/embed/popconfirm/dynamic-trigger.md): Set `disabled` to skip the bubble, and the trigger's own `onClick` runs straight away, like when the reader turns confirmation off.
- [Inside a Modal](https://ui.antuikit.com/embed/popconfirm/nested-dialog.md): A Popconfirm on each row of a Modal opens above the dialog, with no z-index to set.
- [Discard unsaved changes](https://ui.antuikit.com/embed/popconfirm/discard-changes.md): Tie `disabled` to whether a field has unsaved edits, so Cancel asks first only when there is something to lose.
- [Styling the parts](https://ui.antuikit.com/embed/popconfirm/styled-parts.md): Pass `classNames` to style one part of the bubble, like `container` for a wider box or `icon` for a larger glyph.
- [API key list](https://ui.antuikit.com/embed/popconfirm/row-delete.md): A list of API keys where each Revoke asks first, and the row leaves once the `onConfirm` Promise resolves.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/popconfirm`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Popconfirm` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.