Confirm Dialogs

For a better user experience, it is helpful to allow users to confirm destructive actions. This can help prevent accidental deletions or other irreversible actions. The UI Foundations Kit includes a confirm dialog that can be used for this case, or cases where users need to supply some information before proceeding.

​

Usage

UI Foundations Kit provides a hook called useDisclosure that provides the state necessary to manage the visibility of the dialog. The ConfirmDialog component is a pre-styled dialog that can be fed custom UI to ask for feedback or form input.

import { useDisclosure } from '~/hooks/useDisclosure';
import { ConfirmDialog } from '~/components/ConfirmDialog';

export function MyComponent() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Button onClick={onOpen}>Open Dialog</Button>
      <ConfirmDialog
        isOpen={isOpen}
        onClose={onClose}
        title="Are you sure?"
        description="This action is irreversible."
        onConfirm={onClose}
        onCancel={onClose}
      />
    </>
  );
}