Destructive Modal

A confirmation dialog for dangerous actions like delete operations. Supports optional text confirmation for extra safety.

  • Feedback
  • modal
  • dialog
  • confirmation
  • delete
  • destructive
  • warning

Use requireConfirmation for high-risk actions like account deletion.

Preview
JSX
import { useState } from 'react';
import { Button, DestructiveModal } from '@so.boss/gloss-ui';

function DeleteProject({ onDelete }: { onDelete: () => void }) {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant="secondary" onClick={() => setOpen(true)}>
        Delete project…
      </Button>
      <DestructiveModal
        isOpen={open}
        onClose={() => setOpen(false)}
        onConfirm={() => {
          onDelete();
          setOpen(false);
        }}
      />
    </>
  );
}
Props
Title of the modal
Description/warning message
Text for the confirm button
Text for the cancel button
Text the user must type to confirm
Name of the resource being deleted