ConfirmationModal

A pre-built confirmation dialog with Confirm and Cancel buttons. Use it for destructive or irreversible actions (delete, deactivate, etc.).

📖 Storybook

Preview

Live preview↗ Open in Storybook

Import

import { ConfirmationModal } from "@xocialive/ui-components";

Basic usage

const { open, onOpen, onClose } = useDisclosure();

<Button color="error" onClick={onOpen}>Delete</Button>

<ConfirmationModal
  open={open}
  onClose={onClose}
  onConfirm={async () => {
    await deleteItem(item.id);
    onClose();
  }}
  title="Delete item?"
  message="This action cannot be undone."
  confirmLabel="Delete"
  confirmColor="error"
/>

Props

Prop	Type	Default	Description
open	boolean	—	Controls visibility
onClose	() => void	—	Cancel / close handler
onConfirm	() => void | Promise<void>	—	Confirm handler
title	string	—	Dialog title
message	string	—	Body message
confirmLabel	string	"Confirm"	Confirm button label
cancelLabel	string	"Cancel"	Cancel button label
confirmColor	MuiButtonColor	"primary"	Confirm button colour
isLoading	boolean	false	Disables buttons and shows spinner