Modal

The Modal component offers a way to display content in an overlay that floats above the current page. This is particularly useful for user confirmations, more detailed information, or any content that requires attention.

Report Issue Github

Usage

Use the Modal component for any situation where you need to display content in an overlay above the main content.

Basic Modal

To use a modal, you'll need both the Trigger and Modal.Root components. The trigger can be any clickable element.


function ModalExample() {
  const [isOpen, setIsOpen] = React.useState(false);
  const toggleModal = () => {
    setIsOpen(!isOpen);
  };
  return (
    <>
      <Button variant="ghost" onClick={toggleModal}>
        Open
      </Button>
      <Modal.Root open={isOpen} onClose={toggleModal}>
        <Modal.Content title={'First Modal'} subtitle={'This is the first modal'}>
          <Typography.Text>This is the content</Typography.Text>
        </Modal.Content>
      </Modal.Root>
    </>
  );
}

Confirm Modal

For confirmations, you can use the confirm variant and provide onConfirm and onCancel callbacks.


function ConfirmExample() {
  const [isOpen, setIsOpen] = React.useState(false);
  const toggleModal = () => {
    setIsOpen(!isOpen);
  };
  return (
    <>
      <Button variant="ghost" onClick={toggleModal}>
        Open
      </Button>
      <Modal.Root variant="confirm" open={isOpen} onClose={toggleModal}>
        <Modal.Content title={'First Modal'} subtitle={'This is the first modal'}>
          <Typography.Text>This is the content</Typography.Text>
          <Flex width={'100%'} justify="end">
            <Modal.Action variant="close">
              <Button variant="outlined" color="gray">
                Close
              </Button>
            </Modal.Action>
            <Modal.Action variant="confirm">
              <Button highContrast>Confirm</Button>
            </Modal.Action>
          </Flex>
        </Modal.Content>
      </Modal.Root>
    </>
  );
}

Nested Modal

For nested modal, you can trigger more modal inside the content.


function NestedExample() {
  const [isOpen, setIsOpen] = React.useState(false);
  const [isNestedOpen, setIsNestedOpen] = React.useState(false);
  const toggleModal = () => {
    setIsOpen(!isOpen);
  };
  const toggleNestedModal = () => {
    setIsNestedOpen(!isNestedOpen);
  };
  return (
    <>
      <Button variant="ghost" onClick={toggleModal}>
        Open
      </Button>
      <Modal.Root open={isOpen} onClose={toggleModal}>
        <Modal.Content title={'First Modal'} subtitle={'This is the first modal'}>
          <Flex direction="column">
            <Typography.Text>This is the content</Typography.Text>
            <Button variant="ghost" onClick={toggleNestedModal}>
              Nested Open
            </Button>
            <Modal.Root variant="confirm" open={isNestedOpen} onClose={toggleNestedModal}>
              <Modal.Content title={'Second Modal'} subtitle={'This is the second modal'}>
                <Typography.Text>This is the nested content</Typography.Text>
                <Flex width={'100%'} justify="end">
                  <Modal.Action variant="close">
                    <Button variant="outlined" color="gray">
                      Close
                    </Button>
                  </Modal.Action>
                  <Modal.Action variant="confirm">
                    <Button highContrast>Confirm</Button>
                  </Modal.Action>
                </Flex>
              </Modal.Content>
            </Modal.Root>
            <Flex width={'100%'} justify="end">
              <Modal.Action variant="close">
                <Button variant="outlined" color="gray">
                  Close
                </Button>
              </Modal.Action>
              <Modal.Action variant="confirm">
                <Button highContrast>Confirm</Button>
              </Modal.Action>
            </Flex>
          </Flex>
        </Modal.Content>
      </Modal.Root>
    </>
  );
}

API

Props

Modal

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-
`variant`	`'default' \| 'confirm'`	-	-
`onCancel`	`() => void`	-	-
`onConfirm`	`() => void`	-	-
`onClose`	`() => void`	-	-
`radius`	`ThemeRadius`	-	-
`shadow`	`ThemeShadow`	-	-

Content

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-
`title`	`string`	-	-
`subtitle`	`string`	-	-
`confirmText`	`string`	-	-
`cancelText`	`string`	-	-

Action

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-
`variant`	`'close' \| 'confirm'`	`'close'`	-

Drawer

Toast