Backdrop

() => {
  const [isOpen, setIsOpen] = React.useState(false)
  return (
    <div>
      <Button onClick={() => setIsOpen(!isOpen)} variant="primary">
        Open Backdrop
      </Button>
      <Backdrop isOpen={isOpen}>
        <Container padding="large">
          <Button
            onClick={() => setIsOpen(!isOpen)}
            variant="primary"
          >
            Close Backdrop
          </Button>
        </Container>
      </Backdrop>
    </div>
  )
}

() => {
  const [isOpen, setIsOpen] = React.useState(false)
  return (
    <div>
      <Button onClick={() => setIsOpen(!isOpen)} variant="primary">
        Open Backdrop
      </Button>
      <Backdrop isOpen={isOpen} onClick={() => setIsOpen(false)}>
        <Container
          onClick={this.handleClick}
          height="100%"
          paddingTop="12vw"
        >
          <Container
            onClick={e => e.stopPropagation()}
            maxWidth={80}
            width="100%"
            margin="0 auto"
            padding="large"
            backgroundColor="white"
            radius="medium"
            shadow="large"
          >
            <div>Backdrop content</div>
            <Button onClick={() => setIsOpen(!isOpen)}>Close Backdrop</Button>
          </Container>
        </Container>
      </Backdrop>
    </div>
  )
}