Dialog

Modeless

Dialog has modal behavior by default, which will not allow users to interact with other portions of an app while it is open. You can disable this behavior with the modeless prop.

() => {
  class Demo extends Component {
    constructor(props) {
      super(props);

      this.state = {
        isOpen: false
      };

      this.toggleDialog = this.toggleDialog.bind(this);
      this.handleClose = this.handleClose.bind(this);
    }

    toggleDialog() {
      this.setState(prevState => ({
        isOpen: !prevState.isOpen
      }));
    }

    handleClose() {
      this.setState(prevState => ({
        isOpen: false
      }));
    }

    render() {
      const { isOpen } = this.state;

      return (
        <div>
          <Button onClick={this.toggleDialog}>{isOpen ? 'Close' : 'Open' } Dialog</Button>
          <Dialog
            modeless
            title="Lorem ipsum dolor sit amet"
            actions={[
              { onClick: this.toggleDialog, text: 'Cancel' },
              { onClick: this.toggleDialog, text: 'Action' }
            ]}
            isOpen={isOpen}
            onClose={this.handleClose}>
            <Text>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </Text>
          </Dialog>
        </div>
      )
    }
  }

  return <Demo />;
}