Standard duskmoon implemented 6 demos

Popconfirm

Popconfirm asks for confirmation around a risky inline action.

Import @duskmoon-dev/components/popconfirm

4 API sections

19 documented props

4 behavior scenarios

Key API

titledescriptionplacementtriggericonopen

Usage

When to use

Use it immediately after user actions or system checks that need visible confirmation.
Choose the least interruptive feedback surface that still makes the state clear.

Implementation notes

Stylesheet Import @duskmoon-dev/components/styles.css once in the app or docs shell.

State Start with default props for static examples, then switch to controlled props when state must be shared.

Theme The preview inherits the active DuskMoon data-theme value from the docs layout.

Features

User feedback

Covers transient, inline, or blocking feedback patterns for user actions and system status.

Action recovery

Shows how the component keeps next actions visible after success, warning, or failure states.

Primary API surface

Popconfirm is most often configured through `title`, `description`, `placement`, `trigger`.

Covered behavior

Renders title and description from click trigger

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Basic usage

authored

Import the component stylesheet and Popconfirm from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Popconfirm } from "@duskmoon-dev/components/popconfirm";

export function Example() {
  return (<Popconfirm
  title="DuskMoon"
  open
>
  DuskMoon Popconfirm
</Popconfirm>);
}

Preview

Renders title and description from click trigger

test-backed

Popconfirm scenario from the component test coverage: renders title and description from click trigger.

Source

import "@duskmoon-dev/components/styles.css";
import { Popconfirm } from "@duskmoon-dev/components/popconfirm";

export function PopconfirmRendersTitleAndDescriptionDemo() {
  return (<Popconfirm
  // Renders title and description from click trigger
  title="DuskMoon"
  open
>
  DuskMoon Popconfirm
</Popconfirm>);
}

Preview

Calls confirm and cancel callbacks, then closes uncontrolled popup

test-backed

Popconfirm scenario from the component test coverage: calls confirm and cancel callbacks, then closes uncontrolled popup.

Source

import "@duskmoon-dev/components/styles.css";
import { Popconfirm } from "@duskmoon-dev/components/popconfirm";

export function PopconfirmCallsConfirmAndCancelDemo() {
  return (<Popconfirm
  // Calls confirm and cancel callbacks, then closes uncontrolled popup
  title="DuskMoon"
  open
>
  DuskMoon Popconfirm
</Popconfirm>);
}

Preview

Keeps popup open until async confirm resolves

test-backed

Popconfirm scenario from the component test coverage: keeps popup open until async confirm resolves.

Source

import "@duskmoon-dev/components/styles.css";
import { Popconfirm } from "@duskmoon-dev/components/popconfirm";

export function PopconfirmKeepsPopupOpenUntilDemo() {
  return (<Popconfirm
  // Keeps popup open until async confirm resolves
  title="DuskMoon"
  open
>
  DuskMoon Popconfirm
</Popconfirm>);
}

Preview

Supports placement, hover trigger, custom icon, and hidden cancel

test-backed

Popconfirm scenario from the component test coverage: supports placement, hover trigger, custom icon, and hidden cancel.

Source

import "@duskmoon-dev/components/styles.css";
import { Popconfirm } from "@duskmoon-dev/components/popconfirm";

export function PopconfirmSupportsPlacementHoverTriggerDemo() {
  return (<Popconfirm
  // Supports placement, hover trigger, custom icon, and hidden cancel
  title="DuskMoon"
  open
>
  DuskMoon Popconfirm
</Popconfirm>);
}

Preview

Sunshine Theme

Moonlight Theme

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Popconfirm
  title="DuskMoon"
  open
>
  DuskMoon Popconfirm
</Popconfirm>
</div>

<div data-theme="moonlight">
  <Popconfirm
  title="DuskMoon"
  open
>
  DuskMoon Popconfirm
</Popconfirm>
</div>

API

The API reference below lists every parsed exported type or interface for Popconfirm. Start with `title`, `description`, `placement`, `trigger` for common usage.

Types: packages/components/src/components/popconfirm/Popconfirm.types.ts Scenarios: packages/components/src/components/popconfirm/Popconfirm.test.tsx

PopconfirmProps interface extends Omit< ComponentProps<"span">, "children" | "title" >

Prop	Type	Required	Description
`title`	`ReactNode`	No	title configures Popconfirm.
`description`	`ReactNode`	No	description configures Popconfirm.
`placement`	`PopconfirmPlacement`	No	placement configures Popconfirm.
`trigger`	`PopconfirmTrigger \| PopconfirmTrigger[]`	No	trigger configures Popconfirm.
`icon`	`ReactNode`	No	icon configures Popconfirm.
`open`	`boolean`	No	open configures Popconfirm.
`defaultOpen`	`boolean`	No	defaultOpen configures Popconfirm.
`disabled`	`boolean`	No	disabled configures Popconfirm.
`arrow`	`boolean`	No	arrow configures Popconfirm.
`destroyTooltipOnHide`	`boolean`	No	destroyTooltipOnHide configures Popconfirm.
`okText`	`ReactNode`	No	okText configures Popconfirm.
`cancelText`	`ReactNode`	No	cancelText configures Popconfirm.
`okButtonProps`	`ButtonProps`	No	okButtonProps configures Popconfirm.
`cancelButtonProps`	`ButtonProps`	No	cancelButtonProps configures Popconfirm.
`showCancel`	`boolean`	No	showCancel configures Popconfirm.
`onConfirm`	`(event: MouseEvent<HTMLButtonElement>) => PopconfirmAction`	No	onConfirm configures Popconfirm.
`onCancel`	`(event: MouseEvent<HTMLButtonElement>) => PopconfirmAction`	No	onCancel configures Popconfirm.
`onOpenChange`	`(open: boolean) => void`	No	onOpenChange configures Popconfirm.
`children`	`ReactElement`	Yes	children configures Popconfirm.

PopconfirmPlacement type

| "top" | "bottom" | "left" | "right" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom"

PopconfirmTrigger type

| "hover" | "focus" | "click" | "contextMenu" | "contextmenu"

PopconfirmAction type

| void | Promise<void> | Promise<unknown> | unknown