Popconfirm

Confirm important actions near their triggers.

Basic usage

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>
  );
}

More examples

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>
  );
}

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.

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`	—	Confirm button props
`cancelButtonProps`	`ButtonProps`	—	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' \| 'soft' \| 'outline' \| 'ghost'`	`'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

#Popconfirm

#Basic usage

#More examples

#Usage

#Types

#PopconfirmProps API