ConfirmDeleteDialog

Storybook

Go to Story

ConfirmDeleteDialogProps

Defined in: packages/design-system/src/molecules/ConfirmDeleteDialog/ConfirmDeleteDialog.tsx:26

Extends

• ComponentProps<typeof Dialog>

Properties

Property	Type	Description	Inherited from	Defined in
children?	ReactNode	-	ComponentProps.children	node_modules/@radix-ui/react-dialog/dist/index.d.mts:14
open?	boolean	-	ComponentProps.open	node_modules/@radix-ui/react-dialog/dist/index.d.mts:15
defaultOpen?	boolean	-	ComponentProps.defaultOpen	node_modules/@radix-ui/react-dialog/dist/index.d.mts:16
modal?	boolean	-	ComponentProps.modal	node_modules/@radix-ui/react-dialog/dist/index.d.mts:18
entityName?	ReactNode	Name of the entity type being deleted. Provide in singular or plural form as appropriate for the context. Examples "user" — when deleting a single user "3 users" — when deleting multiple users	-	packages/design-system/src/molecules/ConfirmDeleteDialog/ConfirmDeleteDialog.tsx:35
itemName?	ReactNode | ReactNode[]	Distinctive item identifier(s) shown before confirming deletion. Pass a single value or an array for bulk deletion. When more than 4 items are provided, only the first 2 are listed followed by "and N more". Examples "example@example.com" ["alice@example.com", "bob@example.com"]	-	packages/design-system/src/molecules/ConfirmDeleteDialog/ConfirmDeleteDialog.tsx:44
onDelete	MouseEventHandler	-	-	packages/design-system/src/molecules/ConfirmDeleteDialog/ConfirmDeleteDialog.tsx:45
isPending?	boolean	Reflects that the delete operation is in progress. When true, the delete button shows a loader and is disabled to prevent duplicate submissions. Default undefined	-	packages/design-system/src/molecules/ConfirmDeleteDialog/ConfirmDeleteDialog.tsx:52

Methods

onOpenChange()?

optional onOpenChange(open): void;

Defined in: node_modules/@radix-ui/react-dialog/dist/index.d.mts:17

Parameters

Parameter	Type
open	boolean

Returns

void

Inherited from

ComponentProps.onOpenChange

---

ConfirmDeleteDialog()

function ConfirmDeleteDialog(__namedParameters): Element;

Defined in: packages/design-system/src/molecules/ConfirmDeleteDialog/ConfirmDeleteDialog.tsx:109

A dialog component for confirming destructive actions like deletion. Built on top of the Dialog component, it provides a consistent interface for confirming irreversible actions.

Supports both single and bulk deletion via the itemName prop.

Parameters

Parameter	Type
__namedParameters	ConfirmDeleteDialogProps

Returns

Element

Examples

Single item

<ConfirmDeleteDialog
  entityName="user"
  itemName="john@example.com"
  onDelete={handleDelete}
  open={isOpen}
  onOpenChange={setIsOpen}
/>

Multiple items

<ConfirmDeleteDialog
  entityName="3 users"
  itemName={["alice@example.com", "bob@example.com", "carol@example.com"]}
  onDelete={handleDelete}
  open={isOpen}
  onOpenChange={setIsOpen}
/>