Modal

Modals display focused content in an overlay with backdrop blur. They support headers, body content, footer actions, and close on backdrop click.

Basic Modal

tsx

<Modal open={open} onClose={() => setOpen(false)} title="Basic Modal">
  <p>Modal body content goes here.</p>
</Modal>

Confirmation Modal

tsx

<Modal
  open={open}
  onClose={close}
  title="Delete Item"
  footer={
    <>
      <Button variant="secondary" onClick={close}>Cancel</Button>
      <Button variant="danger" onClick={handleDelete}>Delete</Button>
    </>
  }
>
  <p>Are you sure? This cannot be undone.</p>
</Modal>

Form Modal

Props

Prop	Type	Default	Description	Required
open	`boolean`	false	Controls modal visibility	No
onClose	`() => void`	-	Called when backdrop or close button is clicked	No
title	`string`	-	Modal header title	No
children	`ReactNode`	-	Modal body content	No
footer	`ReactNode`	-	Action buttons rendered in the footer	No

Usage Guidelines

Use modals for focused tasks that require user attention.
Always provide a way to close (backdrop click + close button).
Place primary actions on the right side of the footer.
Use confirmation modals for destructive actions.
Keep modal content concise; use full pages for complex flows.