# Popconfirm
> Generated from popconfirm.contract.json — do not edit by hand.

A lightweight inline confirmation popover anchored to the trigger — confirm/cancel a low-risk action.

Tier: **composite-antd**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, dashboard, settings.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `title` | string | `—` | The confirmation question |
| `description` | string | `—` | Optional supporting line |
| `okText` | string | `OK` | Confirm button label |
| `cancelText` | string | `Cancel` | Cancel button label |
| `onConfirm` | () => void | `—` | Fires when the confirm button is clicked |
| `placement` | 'top' | 'bottom' | 'left' | 'right' | … | `top` | Where the popover opens relative to the trigger |
| `okType` | 'primary' | 'danger' | `primary` | danger styles the confirm as a red destructive button |
| `icon` | ReactNode | `warning` | Leading warning glyph in the popover header |

## Visual standard (measured)
- Popover: white · radius 8 · elevated
- Confirm: primary Button #6A1EBB · white label
- Cancel: default Button · 1px #E3E3E3 border · #1A1A1A label
- Title: #1A1A1A, one short question
- Anchor: pops from the trigger; not a full modal
- Placement: top · bottom · left · right (arrow tracks the trigger)
- Danger: okType="danger" → red confirm #F5222D for a heavier delete

## When to use
- **Popconfirm** — a low-risk, reversible action needs a quick inline check (delete a row, discard a draft)
- **Modal** — a destructive or irreversible action needs a deliberate, focused confirmation
- **no confirm** — the action is trivial and easily undone — prefer an undo toast

Reserve Popconfirm for low-risk, reversible actions — anchor it to the trigger and keep the question to one line. A destructive or irreversible action (delete account, publish) needs a Modal (see the overlays pattern), never a popover.