Overlay

A conditional overlay component.
It respects the safe-area on iOS by adding extra padding.

It accepts all Box props except for extend.
It can't have padding.

API Reference

Prop	Type	Default
bottom	number \| string
children	React.ReactNode
extend	unknown
left	number \| string
overflow	'auto' \| 'hidden' \| 'scroll' \| 'visible'	auto
right	number \| string
top	number \| string
visible	boolean	false
zIndex	number	10

Examples

Dark Mode

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

  return (
    <>
      <ActionButton onClick={() => setVisible(true)}>Open</ActionButton>
      <Overlay
        bg="grey100"
        top={0}
        right={0}
        left={0}
        bottom={0}
        zIndex={100}
        visible={visible}>
        <Box padding={10} alignSelf="center">
          <ActionButton onClick={() => setVisible(false)}>Close</ActionButton>
        </Box>
      </Overlay>
    </>
  )
}