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

Data table
	Type	Description
aria-describedby	string	The id of an element that describes the modal dialog. Useful for linking help text, instructions, or supporting content.
aria-label	string	Accessible label for the modal dialog. Use this when the modal does not have a visible title or when you want to provide a custom accessible name for screen readers.
aria-labelledby	string	The id of an element that labels the modal dialog. Prefer this when a visible heading or custom header should act as the dialog label.
children	ReactElement<unknown, string \| JSXElementConstructor<any>>	The content to be rendered inside the modal. Expected to be a single React element.
className	string	Additional class names for custom styling the modal content.
closeButtonAriaLabel	string	Accessible label for the close button. Defaults to "Close modal" in the base implementation.
data-testid	string	Optional test ID for testing frameworks.
footer	ReactNode	Optional footer content.
header	ReactNode	Optional custom header content.
onClose	() => void	Callback function fired when the modal is closed.
open	boolean	Controls whether the modal is open. - If omitted, the modal is considered open when rendered. - If provided, the modal opens/closes based on this value.
rounding	RoundingType	Rounding of the modal corners. One of: "none" \| "small" \| "medium" \| "large" \| "full"
shadow	ShadowType	Shadow of the modal. One of: "none" \| "light" \| "medium" \| "strong" \| "intense"
title	ReactNode	Optional modal title used for accessible labelling and default header content.