DialogContainer

A DialogContainer is a wrapper component around the Dialog, which allows you to programatically open and close the dialog. If you want a dialog to be opened with a specific Trigger element, you can use the DialogTrigger component.

Example

A dialog can be rendered by using the DialogTrigger component, in combination with the Dialog component.

function Example() {
  const [isOpen, setOpen] = useState(false);

  return (
    <>
      <Button variant="contained" onPress={() => setOpen(true)}>
        Open Dialog
      </Button>
      <DialogContainer onDismiss={() => setOpen(false)}>
        {isOpen && (
          <Dialog>
            <Header>
              <Heading level={2}>Proceed with Action</Heading>
            </Header>
            <Content>
              <Paragraph level={2}>
                Do you want to proceed with your action?
              </Paragraph>
            </Content>
            <Footer>
              <ButtonGroup>
                <Button variant="outlined" onPress={() => setOpen(false)}>
                  Cancel
                </Button>
                <Button variant="contained" onPress={() => setOpen(false)}>
                  Confirm
                </Button>
              </ButtonGroup>
            </Footer>
          </Dialog>
        )}
      </DialogContainer>
    </>
  );
}

function Example() {
  const [isOpen, setOpen] = useState(false);

  return (
    <>
      <Button
        variant="contained"
        onPress={() => setOpen(true)}
      >
        Open Dialog
      </Button>
      <DialogContainer onDismiss={() => setOpen(false)}>
        {isOpen && (
          <Dialog>
            <Header>
              <Heading level={2}>
                Proceed with Action
              </Heading>
            </Header>
            <Content>
              <Paragraph level={2}>
                Do you want to proceed with your action?
              </Paragraph>
            </Content>
            <Footer>
              <ButtonGroup>
                <Button
                  variant="outlined"
                  onPress={() => setOpen(false)}
                >
                  Cancel
                </Button>
                <Button
                  variant="contained"
                  onPress={() => setOpen(false)}
                >
                  Confirm
                </Button>
              </ButtonGroup>
            </Footer>
          </Dialog>
        )}
      </DialogContainer>
    </>
  );
}

function Example() {
  const [
    isOpen,
    setOpen
  ] = useState(false);

  return (
    <>
      <Button
        variant="contained"
        onPress={() =>
          setOpen(true)}
      >
        Open Dialog
      </Button>
      <DialogContainer
        onDismiss={() =>
          setOpen(false)}
      >
        {isOpen && (
          <Dialog>
            <Header>
              <Heading
                level={2}
              >
                Proceed
                with
                Action
              </Heading>
            </Header>
            <Content>
              <Paragraph
                level={2}
              >
                Do you
                want to
                proceed
                with your
                action?
              </Paragraph>
            </Content>
            <Footer>
              <ButtonGroup>
                <Button
                  variant="outlined"
                  onPress={() =>
                    setOpen(
                      false
                    )}
                >
                  Cancel
                </Button>
                <Button
                  variant="contained"
                  onPress={() =>
                    setOpen(
                      false
                    )}
                >
                  Confirm
                </Button>
              </ButtonGroup>
            </Footer>
          </Dialog>
        )}
      </DialogContainer>
    </>
  );
}