Modal

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

Usage & Examples

Default

default.tsx
<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 API

22 props
Columns
Modal props API
Default
Description
aria-describedbystringNoariaThe id of an element that describes the modal dialog. Useful for linking help text, instructions, or supporting content.
aria-labelstringNoariaAccessible 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-labelledbystringNoariaThe id of an element that labels the modal dialog. Prefer this when a visible heading or custom header should act as the dialog label.
bodyClassNamestringNopropsAdditional class names for the modal body section.
childrenReactElement<unknown, string | JSXElementConstructor<any>>NopropsThe content to be rendered inside the modal. Expected to be a single React element.
classNamestringNostylingAdditional class names for custom styling the modal content.
closeButtonAriaLabelstringNoprops"Close modal"Accessible label for the close button. Defaults to "Close modal" in the base implementation.
closeButtonClassNamestringNopropsAdditional class names for the modal close button.
data-testidstringNotestingBackward-compatible alias for test ID attributes.
footerReactNodeNopropsOptional footer content.
footerClassNamestringNopropsAdditional class names for the modal footer section.
headerReactNodeNopropsOptional custom header content.