Confirm component can be used to display an awaitable confirmation UI. Main advantage to use confirm is that it allows you to display UI and then await on user action so that you can take action based on user input.


  • title: string; => Dialog Title
  • submitLabel?: string; => Submit Label
  • cancelLabel?: string; => Cancel Label
  • children: React.ReactNode; => Content of Dialog
  • valid?: () => boolean; => Custom validation function for Prompt UI


Confirm component is made up of a Provider and a hook.

  • ConfirmProvider context is used to display a global Modal view on demand.
  • useConfirm is the hook that provides functionality to display UI


Can be used to re-confirm user action.

// in component
const { confirm } = useConfirm();

// somewhere in event handler
const result = await confirm({
  title: `Confirm ${action}`,
  children: `Are you sure you want to ${action} item?`,
// or
const delResult = await confirm({
  title: `Delete ${itemName}?`,
  children: (
      Are you sure you want to <span className="text-red-500">delete</span> <b>{itemName}</b>?
  submitLabel: 'Delete',
  primaryButtonClassName: 'bg-red-800 text-red-100',
if (!delResult) {


Can be used to alert user.

const { alert } = useConfirm();

// if item exists let user know and exit
if (existingItem) {
  await alert({
    title: 'Iteme already exists',
    children: `Item ${itemName} already exists.`,
    confirmLabel: 'OK',


Can be used to prompt user for an input before taking action. Prompt requires you to define item

const { prompter } = useConfirm();
const nameRef = useRef(item?.name || '');
const handleNameChange = useCallback(({ target: { value } }) => {
  nameRef.current = value;
}, []);
const result = await prompter({
  title: 'Enter Name',
  label: 'Item Name',
  value: nameRef.current,
  onChange: handleNameChange,
  placeholder: 'name of item',
  children: undefined,
  valid: () => !!nameRef.current,