Components

Popconfirm

A small confirmation panel next to a button that asks yes or no before a light action.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { Popconfirm } from '@bigbang/ui';
Source: Popconfirm.tsx
Storybook: Popconfirm · Playground

Popconfirm is in the @bigbang/ui package.

import { Button, Popconfirm } from '@bigbang/ui';

<Popconfirm
  trigger={<Button variant="secondary">Archive</Button>}
  title="Archive this record?"
  confirmLabel="Archive"
  onConfirm={archive}
/>;

Props

triggerRequired

Description: The button whose action needs a confirmation, usually a Button or an IconButton.
Type: ReactElement

titleRequired

Description: The question, such as "Bu kartı silmek istiyor musunuz?". It names the panel.
Type: ReactNode

description

Description: One sentence on the result, such as "Bu işlem geri alınamaz.".
Type: ReactNode

confirmLabel

Description: Label of the confirm button: the action as a verb, such as "Sil". Without it, ui.popconfirm.confirm ("Onayla" or "Confirm").
Type: string

cancelLabel

Description: Label of the cancel button. Without it, ui.popconfirm.cancel ("Vazgeç" or "Cancel").
Type: string

tone

Description: danger gives the confirm button the danger tone, for actions that delete or cannot be undone.
Type: 'neutral' | 'danger'
Default: 'neutral'

onConfirmRequired

Description: Called on confirm. When it returns a promise, the confirm button shows loading and the panel closes once it settles.
Type: () => void | Promise<unknown>

onCancel

Description: Called on cancel, Escape or an outside press.
Type: () => void

side

Description: Side of the trigger where the panel opens; it flips when there is no room.
Type: PopoverSide
Default: 'top'

align

Description: Alignment along that side.
Type: 'start' | 'center' | 'end'
Default: 'center'

open

Description: Controlled open state. Pass it with onOpenChange.
Type: boolean

defaultOpen

Description: Open state on first render when uncontrolled.
Type: boolean
Default: false

onOpenChange

Description: Called with the new open state.
Type: (open: boolean) => void

Data attributes

data-component="popconfirm" and data-tone: on the panel.
data-part: header, footer.