Modal

Dark Mode
Accessibility

A conditional modal component with built-in accessibility features.

Props

Name	Type	Description
actions	array	A list of actions rendered in the action bar.
children	element	The content of the modal.
onClose	func	A listener that is called once clicked outside of the modal.
secondaryAction	func	A secondary Action in the header of the modal.
title	string	Sets the title of the modal.
triggeredByRef	object	A ref to the element that triggered the modal. Focus will be restored to this element when the modal closes.
useDialog	bool	Force using dialog element (true) or overlay fallback (false). Defaults to browser support detection.
visible	bool	Sets the visiblity of the modal.
zIndex	number	Sets the zIndex of the modal.

Accessibility

The Modal component includes several accessibility features:

Semantic HTML: Uses the native
```
<dialog>
```
element for proper screen reader support
Focus Management: Automatically focuses elements with
```
autofocus
```
attribute, or the modal content itself
Focus Restoration: Can restore focus to the triggering element when closed using the
```
triggeredBy
```
prop
Keyboard Navigation: Supports ESC key to close the modal
ARIA Attributes: Includes
```
aria-labelledby
```
when a title is provided
Click Outside to Close: Users can click outside the modal to close it
Proper Focus Trapping: Focus remains within the modal while it's open

Examples

Dark Mode

function Example() {
  const [visible, setVisible] = React.useState(false)

  return (
    <>
      <ActionButton onClick={() => setVisible(true)}>Open</ActionButton>
      <Modal zIndex={100} visible={visible} onClose={() => setVisible(false)}>
        Modal
      </Modal>
    </>
  )
}function Example() {
  const [visible, setVisible] = React.useState(false)

  return (
    <>
      <ActionButton onClick={() => setVisible(true)}>Open</ActionButton>
      <Modal zIndex={100} visible={visible} onClose={() => setVisible(false)}>
        Modal
      </Modal>
    </>
  )
}

Actions

Dark Mode

function Example() {
  const [visible, setVisible] = React.useState(false)
  const [actions, setActions] = React.useState(1)

  const closeButton = (
    <ActionButton onClick={() => setVisible(false)}>Close</ActionButton>
  )

  return (
    <>
      <Box space={2}>
        <ActionButton
          onClick={() => {
            setActions(1)
            setVisible(true)
          }}>
          Open with 1 Action
        </ActionButton>
        <ActionButton
          onClick={() => {
            setActions(2)
            setVisible(true)
          }}>
          Open with 2 Actions
        </ActionButton>
      </Box>
      <Modal
        zIndex={100}
        title="Very long title that breaks on multiple lines"
        visible={visible}
        onClose={() => setVisible(false)}
        actions={Array.from(Array(actions).keys()).map(() => closeButton)}>
        <Text>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
          rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
          ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
          sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
          dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
          et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
          takimata sanctus est Lorem ipsum dolor sit amet.
          <br />
          <br />
          <br />
          <br />
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
          eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
          voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
          clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
          amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
          Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
          sit amet.
          <br />
          <br />
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
          rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
          ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
          sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
          dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
          et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
          takimata sanctus est Lorem ipsum dolor sit amet.
          <br />
          <br />
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
          eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
          voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
          clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
          amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
          Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
          sit amet.
        </Text>
      </Modal>
    </>
  )
}function Example() {
  const [visible, setVisible] = React.useState(false)
  const [actions, setActions] = React.useState(1)

  const closeButton = (
    <ActionButton onClick={() => setVisible(false)}>Close</ActionButton>
  )

  return (
    <>
      <Box space={2}>
        <ActionButton
          onClick={() => {
            setActions(1)
            setVisible(true)
          }}>
          Open with 1 Action
        </ActionButton>
        <ActionButton
          onClick={() => {
            setActions(2)
            setVisible(true)
          }}>
          Open with 2 Actions
        </ActionButton>
      </Box>
      <Modal
        zIndex={100}
        title="Very long title that breaks on multiple lines"
        visible={visible}
        onClose={() => setVisible(false)}
        actions={Array.from(Array(actions).keys()).map(() => closeButton)}>
        <Text>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
          rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
          ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
          sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
          dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
          et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
          takimata sanctus est Lorem ipsum dolor sit amet.
          <br />
          <br />
          <br />
          <br />
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
          eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
          voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
          clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
          amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
          Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
          sit amet.
          <br />
          <br />
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
          rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
          ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
          sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
          dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
          et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
          takimata sanctus est Lorem ipsum dolor sit amet.
          <br />
          <br />
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
          eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
          voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
          clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
          amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
          Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
          sit amet.
        </Text>
      </Modal>
    </>
  )
}

Nested Modals

Dark Mode

function Example() {
  const [outerVisible, setOuterVisible] = React.useState(false)
  const [innerVisible, setInnerVisible] = React.useState(false)
  const innerTriggerRef = React.useRef(null)

  return (
    <>
      <ActionButton onClick={() => setOuterVisible(true)}>
        Open Outer Modal
      </ActionButton>

      <Modal
        title="Outer Modal"
        visible={outerVisible}
        onClose={() => setOuterVisible(false)}>
        <Box space={4}>
          <Text>This is the outer modal content.</Text>
          <ActionButton
            ref={innerTriggerRef}
            onClick={() => setInnerVisible(true)}>
            Open Inner Modal
          </ActionButton>
        </Box>
      </Modal>

      <Modal
        title="Inner Modal"
        visible={innerVisible}
        onClose={() => setInnerVisible(false)}
        triggeredByRef={innerTriggerRef}
        zIndex={20}>
        <Box space={4}>
          <Text>This is the inner modal content.</Text>
          <Text>
            When this modal closes, focus will be restored to the button in the
            outer modal that opened it.
          </Text>
          <ActionButton onClick={() => setInnerVisible(false)}>
            Close Inner Modal
          </ActionButton>
        </Box>
      </Modal>
    </>
  )
}function Example() {
  const [outerVisible, setOuterVisible] = React.useState(false)
  const [innerVisible, setInnerVisible] = React.useState(false)
  const innerTriggerRef = React.useRef(null)

  return (
    <>
      <ActionButton onClick={() => setOuterVisible(true)}>
        Open Outer Modal
      </ActionButton>

      <Modal
        title="Outer Modal"
        visible={outerVisible}
        onClose={() => setOuterVisible(false)}>
        <Box space={4}>
          <Text>This is the outer modal content.</Text>
          <ActionButton
            ref={innerTriggerRef}
            onClick={() => setInnerVisible(true)}>
            Open Inner Modal
          </ActionButton>
        </Box>
      </Modal>

      <Modal
        title="Inner Modal"
        visible={innerVisible}
        onClose={() => setInnerVisible(false)}
        triggeredByRef={innerTriggerRef}
        zIndex={20}>
        <Box space={4}>
          <Text>This is the inner modal content.</Text>
          <Text>
            When this modal closes, focus will be restored to the button in the
            outer modal that opened it.
          </Text>
          <ActionButton onClick={() => setInnerVisible(false)}>
            Close Inner Modal
          </ActionButton>
        </Box>
      </Modal>
    </>
  )
}

Fallback Implementation

The Modal component automatically detects browser support for the native

<dialog>

element and falls back to an overlay-based implementation for older browsers. You can also manually force the fallback behavior using the

useDialog

prop.

Dark Mode

function Example() {
  const [visible, setVisible] = React.useState(false)

  return (
    <>
      <ActionButton onClick={() => setVisible(true)}>
        Open Modal with Overlay Fallback
      </ActionButton>

      <Modal
        title="Fallback Modal"
        visible={visible}
        onClose={() => setVisible(false)}
        useDialog={false}>
        <Box space={4}>
          <Text>
            This modal uses the overlay-based implementation instead of the
            native dialog element.
          </Text>
          <Text>
            This can be useful for testing compatibility or when you need
            consistent behavior across all browsers.
          </Text>
          <ActionButton onClick={() => setVisible(false)}>
            Close Modal
          </ActionButton>
        </Box>
      </Modal>
    </>
  )
}function Example() {
  const [visible, setVisible] = React.useState(false)

  return (
    <>
      <ActionButton onClick={() => setVisible(true)}>
        Open Modal with Overlay Fallback
      </ActionButton>

      <Modal
        title="Fallback Modal"
        visible={visible}
        onClose={() => setVisible(false)}
        useDialog={false}>
        <Box space={4}>
          <Text>
            This modal uses the overlay-based implementation instead of the
            native dialog element.
          </Text>
          <Text>
            This can be useful for testing compatibility or when you need
            consistent behavior across all browsers.
          </Text>
          <ActionButton onClick={() => setVisible(false)}>
            Close Modal
          </ActionButton>
        </Box>
      </Modal>
    </>
  )
}

Changelog

03. Nov 2021

Updated layout according to the latest design
Introducing the
```
actions
```
prop that renders a sticky action bar at the bottom of the Modal
Added Dark Mode support