Modal

The Modal component renders content in a portal, with customizable actions like confirm, cancel, and close.

Usage

Default

<Button theme="primary" onClick={() => setIsOpen(true)}>
  Open Modal
</Button>

{isOpen && (
  <Modal onClose={() => setIsOpen(false)}>
    <div style={{ padding: "1rem" }}>
      <h2 style={{ marginTop: 0 }}>Hello from the modal!</h2>
      <p>
        This is a fully accessible, focus-trapped modal component rendered via portal.
      </p>
      <Button onClick={() => alert("Action inside modal!")}>Action</Button>
    </div>
  </Modal>
)}

Props

Sortable data table
Prop	Type	Default	Description
children	ReactNode	-	Content to display inside the modal (JSX elements or string).
rounding	"none" \| "small" \| "medium" \| "large"	Configured Default	Border radius for modal corners.
shadow	"none" \| "light" \| "medium" \| "strong" \| "intense"	Configured Default	Shadow depth for the modal surface.
className	string	-	Custom CSS class for the modal content container.
onClose	() => void	-	Callback fired when the modal is requested to close (background click, escape key, or close button).
data-testid	string	"modal"	Test id for querying the component in tests.