const [open, setOpen] = useState(false);
<Button variant="primary" onClick={() => setOpen(true)}>Open Modal</Button>
<Modal open={open} onClose={() => setOpen(false)} title="Confirm action"
  description="Are you sure you want to proceed?"
  footer={<><Button variant="outline">Cancel</Button><Button variant="danger">Delete</Button></>}>
  <p>This will permanently delete all selected items.</p>
</Modal>

<Modal open={open} onClose={onClose} title="Small" size="sm">...</Modal>
<Modal open={open} onClose={onClose} title="Medium" size="md">...</Modal>
<Modal open={open} onClose={onClose} title="Large" size="lg">...</Modal>

<Modal open={open} onClose={onClose} title="Long Content" scrollable
  footer={<Button>OK</Button>}>
  {/* long content scrolls inside */}
</Modal>

<Modal open={open} onClose={onClose} title="Fullscreen Dialog" fullscreen>...</Modal>