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}>
        <div
          onClick={this.handleClick}
          style={{ height: '100%', paddingTop: '12vw' }}
        >
          <div
            onClick={e => e.stopPropagation()}
            style={{
              maxWidth: '40rem',
              width: '100%',
              margin: '0 auto',
              padding: '2rem',
              backgroundColor: 'white',
            }}
          >
            <div>Backdrop content</div>
            <Button onClick={() => setIsOpen(!isOpen)}>Close Backdrop</Button>
          </div>
        </div>
      </Backdrop>
    </div>
  )
}