Scrim

Scrims cover the underlying UI to allow the user to focus on a specific task in the elevated layer.

{() => {
    class StateManager extends React.Component {
      constructor(props, context) {
        super(props, context)
        this.state = { isOpen: false }
        this.toggle = this.toggle.bind(this)
      }
      toggle() {
        this.setState({ isOpen: !this.state.isOpen })
      }
      render() {
        return (
          <SpacedGroup>
            <Button onClick={this.toggle}>
              {this.state.isOpen ? 'Close' : 'Open'}
            
            <Button onClick={() => console.log('clicked')}>Click Me</Button>
            <Scrim open={this.state.isOpen} onClick={this.toggle} />
          </SpacedGroup>
        )
      }
    }
    return <StateManager />
  }}
</Playground>

API