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>