Component reference
Popconfirm
Confirm a destructive action beside its trigger.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Press Escape or click outside to cancel; both call onCancel as well. The panel closes after the action and focus is already back on the trigger.
Width adapts to the available space
"use client";
import { Popconfirm, Button, Badge } from "@pimolu/react";
import { useState } from "react";
export function DemoExample() {
const [outcome, setOutcome] = useState("No confirmation resolved yet");
return (
<div className="grid gap-5 min-w-0">
<div className="flex flex-wrap items-center gap-3 min-w-0">
<Popconfirm
title="Delete the Atlas project?"
description="All 24 tasks, 8 files and the project history will be permanently removed."
variant="destructive"
confirmLabel="Delete project"
onConfirm={() => setOutcome("Deleted the Atlas project")}
onCancel={() => setOutcome("Kept the Atlas project")}
>
<Button appearance="outline">Delete project</Button>
</Popconfirm>
<Badge variant="neutral">
{outcome}
</Badge>
</div>
<p className="max-w-prose leading-relaxed">
Press Escape or click outside to cancel; both call onCancel as
well. The panel closes after the action and focus is already
back on the trigger.
</p>
</div>
);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Custom labels
confirmLabel and cancelLabel accept any node, so an action can carry an icon or a translated label.
Controlled open state
The page owns the open state. The external button opens the confirmation on its trigger without a click on it, which is useful for command palettes or keyboard shortcuts.
Placement and custom icon
The panel flips when the preferred side has no room, exactly like Popover. icon replaces the default warning glyph.
Usage
Use a brief question and explicit confirm/cancel labels. Persist deletion only after confirmation.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluPopconfirmProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactElement<unknown, string | JSXElementConstructor<any>> | — | The element that opens the confirmation: any element, or a component that passes down the props it receives. Focus returns to it when the confirmation is resolved. |
titleRequired | ReactNode | — | Question shown at the top of the panel. It names the dialog. |
description | ReactNode | — | Optional explanation under the title. |
confirmLabel | ReactNode | "Confirm" | Label of the confirming action. Defaults to "Confirm". |
cancelLabel | ReactNode | "Cancel" | Label of the cancelling action. Defaults to "Cancel". |
onConfirm | (() => void) | undefined | — | Runs when the confirming action is pressed. |
onCancel | (() => void) | undefined | — | Runs when the confirmation is dismissed without confirming: the cancel button, Escape, an outside click, or a second click on the trigger. |
variant | PimoluPopconfirmVariant | undefined | "default" | Destructive styling for irreversible actions. |
open | boolean | undefined | — | Controlled open state. Omit to let the component own it. |
defaultOpen | boolean | undefined | false | Initial open state when uncontrolled. Defaults to false. |
onOpenChange | ((open: boolean) => void) | undefined | — | Called whenever the component asks to open or close. |
placement | PimoluPopoverPlacement | undefined | "bottom" | Preferred side of the trigger. Defaults to "bottom". |
offset | number | undefined | 8 | Distance from the trigger, in pixels. Defaults to 8. |
disabled | boolean | undefined | false | Never open. The trigger keeps its own disabled state. |
icon | ReactNode | — | Custom icon; a warning glyph is used by default. |
className | string | undefined | — | Class applied to the popover panel. |
childrenRequiredReactElement<unknown, string | JSXElementConstructor<any>>No default extracted.
The element that opens the confirmation: any element, or a component that passes down the props it receives. Focus returns to it when the confirmation is resolved.
titleRequiredReactNodeNo default extracted.
Question shown at the top of the panel. It names the dialog.
descriptionReactNodeNo default extracted.
Optional explanation under the title.
confirmLabelReactNodeDefault: "Confirm"
Label of the confirming action. Defaults to "Confirm".
cancelLabelReactNodeDefault: "Cancel"
Label of the cancelling action. Defaults to "Cancel".
onConfirm(() => void) | undefinedNo default extracted.
Runs when the confirming action is pressed.
onCancel(() => void) | undefinedNo default extracted.
Runs when the confirmation is dismissed without confirming: the cancel button, Escape, an outside click, or a second click on the trigger.
variantPimoluPopconfirmVariant | undefinedDefault: "default"
Destructive styling for irreversible actions.
openboolean | undefinedNo default extracted.
Controlled open state. Omit to let the component own it.
defaultOpenboolean | undefinedDefault: false
Initial open state when uncontrolled. Defaults to false.
onOpenChange((open: boolean) => void) | undefinedNo default extracted.
Called whenever the component asks to open or close.
placementPimoluPopoverPlacement | undefinedDefault: "bottom"
Preferred side of the trigger. Defaults to "bottom".
offsetnumber | undefinedDefault: 8
Distance from the trigger, in pixels. Defaults to 8.
disabledboolean | undefinedDefault: false
Never open. The trigger keeps its own disabled state.
iconReactNodeNo default extracted.
Custom icon; a warning glyph is used by default.
classNamestring | undefinedNo default extracted.
Class applied to the popover panel.
Accessibility
- Keep a keyboard-accessible cancel path and verify focus restoration after dismissal.