Modal

A modal dialog component that appears on top of the main content,

function ModalExample() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
      <Modal
        open={isOpen}
        onClose={() => setIsOpen(false)}
        title="Example Modal"
        subtitle="This is an example subtitle"
        icon={<User />}
        size="regular"
        footerVariant="integrated"
        footer={
          <>
            <Button onClick={() => setIsOpen(false)} variant="secondary">
              Cancel
            </Button>
            <Button onClick={() => setIsOpen(false)}>Confirm</Button>
          </>
        }
      >
        <p>
          This is an example of how to use the Modal component with all
          available props. The modal includes a title, subtitle, icon, and
          footer with action buttons.
        </p>
      </Modal>
    </>
  );
}

Props

title

required

Typestring

Title displayed in the modal header

open

required

Typeboolean

Controls the visibility of the modal

children

TypeReactNode

Content to be displayed in the modal body

footer

TypeReactNode

Content to be displayed in the modal footer

footerVariant

Type'integrated' | 'separated'

Default'integrated'

Variant of the footer styling

onClose

Typesignature

Callback function called when the modal is closed

size

Type'regular' | 'large'

Default'regular'

Size variant of the modal

subtitle

Typestring

Optional subtitle displayed below the title

CSS Variables

Color

--ax-public-modal-backdrop-background

--ax-public-modal-background

--ax-public-modal-close-button-color

--ax-public-modal-content-background

--ax-public-modal-description-color

--ax-public-modal-footer-border-color

--ax-public-modal-header-background

--ax-public-modal-header-border-color

--ax-public-modal-icon-background

--ax-public-modal-icon-color

--ax-public-modal-title-color

Radius

--ax-public-modal-border-radius

--ax-public-modal-icon-border-radius

--ax-public-modal-icon-border-radius-large

Shadow

--ax-public-modal-box-shadow

Spacing

--ax-public-modal-content-gap

--ax-public-modal-content-padding

--ax-public-modal-footer-padding

--ax-public-modal-gap

--ax-public-modal-gap-large

--ax-public-modal-icon-padding

--ax-public-modal-large-icon-padding

--ax-public-modal-large-padding

--ax-public-modal-padding

Size

--ax-public-modal-description-line-height

--ax-public-modal-description-size

--ax-public-modal-large-title-line-height

--ax-public-modal-large-title-size

--ax-public-modal-large-width

--ax-public-modal-width