> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/en/components/popconfirm.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/en/llms-full.txt.

# Popconfirm

Confirm important actions near their triggers.

## Basic usage


Remove project

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/popconfirm/basic.tsx"
import { Button, Popconfirm } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function PopconfirmBasic() {
  const [removed, setRemoved] = useState(false);
  return (
    <Popconfirm
      title="Remove this project?"
      description="You can restore it from the recycle bin."
      onConfirm={() => setRemoved(true)}
    >
      <Button variant="outline" danger disabled={removed}>
        {removed ? 'Removed' : 'Remove project'}
      </Button>
    </Popconfirm>
  );
}
```

Expand code

## More examples


Async confirmation

advanced.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/popconfirm/advanced.tsx"
import { Button, Popconfirm } from '@ifhover/leaf-ui';

export function PopconfirmAsync() {
  return (
    <Popconfirm
      title="Submit for review?"
      type="info"
      onConfirm={() => new Promise<void>((resolve) => setTimeout(resolve, 900))}
    >
      <Button>Async confirmation</Button>
    </Popconfirm>
  );
}
```

Expand code

## Usage

onConfirm can return a Promise. Pending operations display loading and prevent duplicate submissions. The popup closes on success and stays open on failure; use onError for feedback. The trigger must accept a ref and button interactions.

## Types

Import these types for data, callbacks and refs.

```ts
import type { PopconfirmProps, ButtonProps } from '@ifhover/leaf-ui';
```

## PopconfirmProps API

| Property             | Type                                                                                                                                                                 | Default     | Description                                                                        |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ---------------------------------------------------------------------------------- |
| `popupPlacement`     | `'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | —           | Placement relative to the trigger.                                                 |
| `popupClassName`     | `string`                                                                                                                                                             | —           | Custom class for the popup.                                                        |
| `popupStyle`         | `CSSProperties`                                                                                                                                                      | —           | Custom popup styles.                                                               |
| `popupRender`        | `(content: React.ReactNode) => React.ReactNode`                                                                                                                      | —           | Wrap or extend popup content; retain the supplied content to preserve interaction. |
| `getPopupContainer`  | `() => Element \| DocumentFragment`                                                                                                                                  | —           | Return a popup container, including a ShadowRoot.                                  |
| `children`           | `ReactElement< HTMLAttributes<HTMLElement> & { ref?: Ref<HTMLElement>; disabled?: boolean } >`                                                                       | Required    | Required. Content or child items                                                   |
| `placement`          | `'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | `'top'`     | Placement                                                                          |
| `open`               | `boolean`                                                                                                                                                            | —           | Controlled visibility                                                              |
| `defaultOpen`        | `boolean`                                                                                                                                                            | `false`     | Initial visibility                                                                 |
| `onOpenChange`       | `(open: boolean) => void`                                                                                                                                            | —           | Open state changes                                                                 |
| `disabled`           | `boolean`                                                                                                                                                            | —           | Disable interaction.                                                               |
| `enterDelay`         | `number`                                                                                                                                                             | `100`       | Pointer opening delay in milliseconds                                              |
| `leaveDelay`         | `number`                                                                                                                                                             | `100`       | Pointer closing delay in milliseconds                                              |
| `width`              | `number \| string`                                                                                                                                                   | —           | Width, numbers are in pixels                                                       |
| `maxWidth`           | `number \| string`                                                                                                                                                   | —           | Maximum popup width                                                                |
| `className`          | `string`                                                                                                                                                             | —           | Container class name                                                               |
| `style`              | `CSSProperties`                                                                                                                                                      | —           | Container inline styles                                                            |
| `aria-label`         | `string`                                                                                                                                                             | —           | Accessible name when no visible label is provided                                  |
| `title`              | `ReactNode`                                                                                                                                                          | Required    | Required. Title content                                                            |
| `description`        | `ReactNode`                                                                                                                                                          | —           | Supporting description                                                             |
| `type`               | `'success' \| 'info' \| 'warning' \| 'error' \| 'default'`                                                                                                           | `'warning'` | Visual or item type                                                                |
| `icon`               | `ReactNode`                                                                                                                                                          | —           | Custom icon                                                                        |
| `confirmText`        | `ReactNode`                                                                                                                                                          | —           | Confirm button content                                                             |
| `cancelText`         | `ReactNode`                                                                                                                                                          | —           | Cancel button content                                                              |
| `confirmButtonProps` | [`ButtonProps`](https://ifhover.github.io/leaf-ui/en/components/button.md#button-api)                                                                                | —           | Confirm button props                                                               |
| `cancelButtonProps`  | [`ButtonProps`](https://ifhover.github.io/leaf-ui/en/components/button.md#button-api)                                                                                | —           | Cancel button props                                                                |
| `showCancel`         | `boolean`                                                                                                                                                            | `true`      | Show cancel button                                                                 |
| `onConfirm`          | `() => void \| Promise<void>`                                                                                                                                        | —           | Confirm action; supports async completion                                          |
| `onCancel`           | `() => void`                                                                                                                                                         | —           | Cancel action                                                                      |
| `onError`            | `(error: unknown) => void`                                                                                                                                           | —           | Error callback                                                                     |

## ButtonProps API

| Property    | Type                                       | Default   | Description            |
| ----------- | ------------------------------------------ | --------- | ---------------------- |
| `variant`   | `'solid' \| 'outline' \| 'soft' \| 'link'` | `'solid'` | Button appearance      |
| `size`      | `'sm' \| 'md' \| 'lg'`                     | `'md'`    | Size or spacing preset |
| `danger`    | `boolean`                                  | `false`   | Danger colors          |
| `loading`   | `boolean`                                  | `false`   | Loading state          |
| `fullWidth` | `boolean`                                  | `false`   | Fill available width   |
| `startIcon` | `ReactNode`                                | —         | Leading icon           |
| `endIcon`   | `ReactNode`                                | —         | Trailing icon          |