ConfirmPopover
Confirm an action in a popup next to the button.
Wrap the action button in ConfirmPopover — clicking it opens a popup with a question and confirm and cancel buttons next to it. onConfirm runs on confirmation, then the popup closes. color='danger' suits irreversible actions. Use it for lightweight confirmations; when the action needs more attention, use ConfirmDialog.
Live example
Example controls
Usage
import { Button, ConfirmPopover } from '@prosazhin/pbcomponents';
<ConfirmPopover
title='Delete the file?'
description='This action cannot be undone.'
color='danger'
confirmText='Delete'
cancelText='Cancel'
onConfirm={() => deleteFile()}
>
<Button
color='danger'
theme='border'
>
Delete
</Button>
</ConfirmPopover>;Component API
| Prop | Type / variants | Purpose | Default |
|---|---|---|---|
children | ReactElement | Trigger element, usually a Button. | — |
title | ReactNode | Confirmation question or heading. | — |
description | ReactNode | Explanation below the heading. | — |
color | 'primary' | 'danger'primary · danger | Confirm button color. | primary |
confirmText | string | Confirm button text. | Confirm |
cancelText | string | Cancel button text. | Cancel |
onConfirm | () => void | Called on confirm; the popup closes afterwards. | — |
onCancel | () => void | Called on cancel. | — |
open | boolean | Controlled open state. | — |
defaultOpen | boolean | Initial open state when uncontrolled. | false |
onOpenChange | (open: boolean) => void | Called when the popup opens or closes. | — |
placement | PopoverPlacementtop · top-start · top-end · bottom · bottom-start · bottom-end · left · left-start · left-end · right · right-start · right-end | Side and alignment relative to the trigger: top, bottom-start, right-end, etc. The popup flips and shifts when space runs out. | bottom-start |
portal | boolean | Renders the popup into a portal at the end of body. | false |
className | string | Class of the root element. | — |
Native HTML attributes are accepted where the component renders the corresponding element. className props only affect styling.