DialogTrigger

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks. The DialogTrigger is a component that facilitates the opening and closing of the Dialog.

Example

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

<DialogTrigger>
  <Button>Proceed</Button>
  {(close) => (
    <Dialog>
      <Header>
        <Heading>Lorem Ipsum</Heading>
        <Description>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </Description>
      </Header>
      <Content>
        <Paragraph>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
          ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </Paragraph>
      </Content>
      <Footer>
        <ButtonGroup>
          <Button variant="outlined" onPress={close}>
            Cancel
          </Button>
          <Button variant="contained" onPress={close}>
            Confirm
          </Button>
        </ButtonGroup>
      </Footer>
    </Dialog>
  )}
</DialogTrigger>

<DialogTrigger>
  <Button>Proceed</Button>
  {(close) => (
    <Dialog>
      <Header>
        <Heading>Lorem Ipsum</Heading>
        <Description>
          Lorem ipsum dolor sit amet, consectetur
          adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua.
        </Description>
      </Header>
      <Content>
        <Paragraph>
          Lorem ipsum dolor sit amet, consectetur
          adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut
          enim ad minim veniam, quis nostrud exercitation
          ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum
          dolore eu fugiat nulla pariatur. Excepteur sint
          occaecat cupidatat non proident, sunt in culpa
          qui officia deserunt mollit anim id est laborum.
        </Paragraph>
      </Content>
      <Footer>
        <ButtonGroup>
          <Button variant="outlined" onPress={close}>
            Cancel
          </Button>
          <Button variant="contained" onPress={close}>
            Confirm
          </Button>
        </ButtonGroup>
      </Footer>
    </Dialog>
  )}
</DialogTrigger>

<DialogTrigger>
  <Button>
    Proceed
  </Button>
  {(close) => (
    <Dialog>
      <Header>
        <Heading>
          Lorem Ipsum
        </Heading>
        <Description>
          Lorem ipsum
          dolor sit
          amet,
          consectetur
          adipiscing
          elit, sed do
          eiusmod
          tempor
          incididunt ut
          labore et
          dolore magna
          aliqua.
        </Description>
      </Header>
      <Content>
        <Paragraph>
          Lorem ipsum
          dolor sit
          amet,
          consectetur
          adipiscing
          elit, sed do
          eiusmod
          tempor
          incididunt ut
          labore et
          dolore magna
          aliqua. Ut
          enim ad minim
          veniam, quis
          nostrud
          exercitation
          ullamco
          laboris nisi
          ut aliquip ex
          ea commodo
          consequat.
          Duis aute
          irure dolor
          in
          reprehenderit
          in voluptate
          velit esse
          cillum dolore
          eu fugiat
          nulla
          pariatur.
          Excepteur
          sint occaecat
          cupidatat non
          proident,
          sunt in culpa
          qui officia
          deserunt
          mollit anim
          id est
          laborum.
        </Paragraph>
      </Content>
      <Footer>
        <ButtonGroup>
          <Button
            variant="outlined"
            onPress={close}
          >
            Cancel
          </Button>
          <Button
            variant="contained"
            onPress={close}
          >
            Confirm
          </Button>
        </ButtonGroup>
      </Footer>
    </Dialog>
  )}
</DialogTrigger>

Types

A dialog can be rendered either as a modal, popover or tray. A popover automatically becomes a modal on mobile devices by default, but this can be override by the mobileType prop.

<DialogTrigger isDismissable type='modal'>
  <Button>Open Modal</Button>
  {(close) => (
    <Dialog>
      <Header>
        <Heading>Modal</Heading>
      </Header>
      <Content>
        <Paragraph>This is a modal.</Paragraph>
      </Content>
    </Dialog>
  )}
</DialogTrigger>

<DialogTrigger isDismissable type='modal'>
  <Button>Open Modal</Button>
  {(close) => (
    <Dialog>
      <Header>
        <Heading>Modal</Heading>
      </Header>
      <Content>
        <Paragraph>This is a modal.</Paragraph>
      </Content>
    </Dialog>
  )}
</DialogTrigger>

<DialogTrigger
  isDismissable
  type="modal"
>
  <Button>
    Open Modal
  </Button>
  {(close) => (
    <Dialog>
      <Header>
        <Heading>
          Modal
        </Heading>
      </Header>
      <Content>
        <Paragraph>
          This is a
          modal.
        </Paragraph>
      </Content>
    </Dialog>
  )}
</DialogTrigger>

<DialogTrigger type='popover'>
  <Button>Open Popover</Button>
  {(close) => (
    <Dialog>
      <Header>
        <Heading>Popover</Heading>
      </Header>
      <Content>
        <Paragraph>This is a popover.</Paragraph>
      </Content>
    </Dialog>
  )}
</DialogTrigger>

<DialogTrigger type='popover'>
  <Button>Open Popover</Button>
  {(close) => (
    <Dialog>
      <Header>
        <Heading>Popover</Heading>
      </Header>
      <Content>
        <Paragraph>This is a popover.</Paragraph>
      </Content>
    </Dialog>
  )}
</DialogTrigger>

<DialogTrigger type="popover">
  <Button>
    Open Popover
  </Button>
  {(close) => (
    <Dialog>
      <Header>
        <Heading>
          Popover
        </Heading>
      </Header>
      <Content>
        <Paragraph>
          This is a
          popover.
        </Paragraph>
      </Content>
    </Dialog>
  )}
</DialogTrigger>

<DialogTrigger type='tray'>
  <Button>Open Tray</Button>
  {(close) => (
    <Dialog>
      <Header>
        <Heading>Tray</Heading>
      </Header>
      <Content>
        <Paragraph>This is a tray.</Paragraph>
      </Content>
    </Dialog>
  )}
</DialogTrigger>

<DialogTrigger type='tray'>
  <Button>Open Tray</Button>
  {(close) => (
    <Dialog>
      <Header>
        <Heading>Tray</Heading>
      </Header>
      <Content>
        <Paragraph>This is a tray.</Paragraph>
      </Content>
    </Dialog>
  )}
</DialogTrigger>

<DialogTrigger type="tray">
  <Button>
    Open Tray
  </Button>
  {(close) => (
    <Dialog>
      <Header>
        <Heading>
          Tray
        </Heading>
      </Header>
      <Content>
        <Paragraph>
          This is a
          tray.
        </Paragraph>
      </Content>
    </Dialog>
  )}
</DialogTrigger>

<DialogTrigger type='fullscreen'>
  <Button>Open Fullscreen</Button>
  {(close) => (
    <Dialog>
      <Header>
        <Heading>Fullscreen</Heading>
      </Header>
      <Content>
        <Paragraph>This is a fullscreen dialog.</Paragraph>
      </Content>
    </Dialog>
  )}
</DialogTrigger>

<DialogTrigger type='fullscreen'>
  <Button>Open Fullscreen</Button>
  {(close) => (
    <Dialog>
      <Header>
        <Heading>Fullscreen</Heading>
      </Header>
      <Content>
        <Paragraph>This is a fullscreen dialog.</Paragraph>
      </Content>
    </Dialog>
  )}
</DialogTrigger>

<DialogTrigger type="fullscreen">
  <Button>
    Open Fullscreen
  </Button>
  {(close) => (
    <Dialog>
      <Header>
        <Heading>
          Fullscreen
        </Heading>
      </Header>
      <Content>
        <Paragraph>
          This is a
          fullscreen
          dialog.
        </Paragraph>
      </Content>
    </Dialog>
  )}
</DialogTrigger>

<DialogTrigger type='fullscreenTakeover'>
  <Button>Open Fullscreen Takeover</Button>
  {(close) => (
    <Dialog>
      <Header>
        <Heading>Fullscreen Fullscreen</Heading>
      </Header>
      <Content>
        <Paragraph>This is a fullscreen takeover dialog.</Paragraph>
      </Content>
    </Dialog>
  )}
</DialogTrigger>

<DialogTrigger type="fullscreenTakeover">
  <Button>Open Fullscreen Takeover</Button>
  {(close) => (
    <Dialog>
      <Header>
        <Heading>Fullscreen Fullscreen</Heading>
      </Header>
      <Content>
        <Paragraph>
          This is a fullscreen takeover dialog.
        </Paragraph>
      </Content>
    </Dialog>
  )}
</DialogTrigger>

<DialogTrigger type="fullscreenTakeover">
  <Button>
    Open Fullscreen
    Takeover
  </Button>
  {(close) => (
    <Dialog>
      <Header>
        <Heading>
          Fullscreen
          Fullscreen
        </Heading>
      </Header>
      <Content>
        <Paragraph>
          This is a
          fullscreen
          takeover
          dialog.
        </Paragraph>
      </Content>
    </Dialog>
  )}
</DialogTrigger>

<DialogTrigger type='drawer'>
  <Button>Open Drawer</Button>
  {(close) => (
    <Dialog>
      <Header>
        <Heading>Drawer</Heading>
      </Header>
      <Content>
        <Paragraph>This is a drawer dialog.</Paragraph>
      </Content>
    </Dialog>
  )}
</DialogTrigger>

<DialogTrigger type='drawer'>
  <Button>Open Drawer</Button>
  {(close) => (
    <Dialog>
      <Header>
        <Heading>Drawer</Heading>
      </Header>
      <Content>
        <Paragraph>This is a drawer dialog.</Paragraph>
      </Content>
    </Dialog>
  )}
</DialogTrigger>

<DialogTrigger type="drawer">
  <Button>
    Open Drawer
  </Button>
  {(close) => (
    <Dialog>
      <Header>
        <Heading>
          Drawer
        </Heading>
      </Header>
      <Content>
        <Paragraph>
          This is a
          drawer
          dialog.
        </Paragraph>
      </Content>
    </Dialog>
  )}
</DialogTrigger>

Sizes

The dialog component comes in various sizes to either fit more or less content. However, please note that only dialogs of type modal can be sized. Also, mobile devices do not support the modal sizes, as they have size restrictions.

<DialogTrigger isDismissable>
  <Button>Small</Button>
  {(close) => (
    <Dialog size='small'>
      <Header>
        <Heading>Modal</Heading>
      </Header>
      <Content>
        <Paragraph>This is a small modal.</Paragraph>
      </Content>
    </Dialog>
  )}
</DialogTrigger>

<DialogTrigger isDismissable>
  <Button>Small</Button>
  {(close) => (
    <Dialog size='small'>
      <Header>
        <Heading>Modal</Heading>
      </Header>
      <Content>
        <Paragraph>This is a small modal.</Paragraph>
      </Content>
    </Dialog>
  )}
</DialogTrigger>

<DialogTrigger
  isDismissable
>
  <Button>
    Small
  </Button>
  {(close) => (
    <Dialog size="small">
      <Header>
        <Heading>
          Modal
        </Heading>
      </Header>
      <Content>
        <Paragraph>
          This is a
          small modal.
        </Paragraph>
      </Content>
    </Dialog>
  )}
</DialogTrigger>

<DialogTrigger isDismissable>
  <Button>Medium</Button>
  {(close) => (
    <Dialog size='medium'>
      <Header>
        <Heading>Medium</Heading>
      </Header>
      <Content>
        <Paragraph>This is a medium modal.</Paragraph>
      </Content>
    </Dialog>
  )}
</DialogTrigger>

<DialogTrigger isDismissable>
  <Button>Medium</Button>
  {(close) => (
    <Dialog size='medium'>
      <Header>
        <Heading>Medium</Heading>
      </Header>
      <Content>
        <Paragraph>This is a medium modal.</Paragraph>
      </Content>
    </Dialog>
  )}
</DialogTrigger>

<DialogTrigger
  isDismissable
>
  <Button>
    Medium
  </Button>
  {(close) => (
    <Dialog size="medium">
      <Header>
        <Heading>
          Medium
        </Heading>
      </Header>
      <Content>
        <Paragraph>
          This is a
          medium modal.
        </Paragraph>
      </Content>
    </Dialog>
  )}
</DialogTrigger>

<DialogTrigger isDismissable>
  <Button>Large</Button>
  {(close) => (
    <Dialog size='large'>
      <Header>
        <Heading>Large</Heading>
      </Header>
      <Content>
        <Paragraph>This is a large modal.</Paragraph>
      </Content>
    </Dialog>
  )}
</DialogTrigger>

<DialogTrigger isDismissable>
  <Button>Large</Button>
  {(close) => (
    <Dialog size='large'>
      <Header>
        <Heading>Large</Heading>
      </Header>
      <Content>
        <Paragraph>This is a large modal.</Paragraph>
      </Content>
    </Dialog>
  )}
</DialogTrigger>

<DialogTrigger
  isDismissable
>
  <Button>
    Large
  </Button>
  {(close) => (
    <Dialog size="large">
      <Header>
        <Heading>
          Large
        </Heading>
      </Header>
      <Content>
        <Paragraph>
          This is a
          large modal.
        </Paragraph>
      </Content>
    </Dialog>
  )}
</DialogTrigger>

Dismissable

The dialog component can be marked as dismissable via the isDismissable prop. If the prop is true, a close button will be added to the top right corner of the dialog. If you wish, you can also specify an onDismiss prop, which is a callback handler for when the modal gets dismissed.

function Example() {
  const handleDismiss = (close) => {
    close();
    alert('Dialog has been dismissed.');
  }

  return (
    <DialogTrigger isDismissable>
      <Button>Proceed</Button>
      {(close) => (
        <Dialog onDismiss={() => handleDismiss(close)}>
          <Header>
            <Heading>Important Message</Heading>
          </Header>
          <Content>
            <Paragraph>You are awesome!</Paragraph>
          </Content>
        </Dialog>
      )}
    </DialogTrigger>
  );
}

function Example() {
  const handleDismiss = (close) => {
    close();
    alert('Dialog has been dismissed.');
  }

  return (
    <DialogTrigger isDismissable>
      <Button>Proceed</Button>
      {(close) => (
        <Dialog onDismiss={() => handleDismiss(close)}>
          <Header>
            <Heading>Important Message</Heading>
          </Header>
          <Content>
            <Paragraph>You are awesome!</Paragraph>
          </Content>
        </Dialog>
      )}
    </DialogTrigger>
  );
}

function Example() {
  const handleDismiss = (
    close
  ) => {
    close();
    alert(
      'Dialog has been dismissed.'
    );
  };

  return (
    <DialogTrigger
      isDismissable
    >
      <Button>
        Proceed
      </Button>
      {(close) => (
        <Dialog
          onDismiss={() =>
            handleDismiss(
              close
            )}
        >
          <Header>
            <Heading>
              Important
              Message
            </Heading>
          </Header>
          <Content>
            <Paragraph>
              You are
              awesome!
            </Paragraph>
          </Content>
        </Dialog>
      )}
    </DialogTrigger>
  );
}

With Tooltips

You can combine DialogTriggers with TooltipTriggers.

function Example() {
  return (
    <DialogTrigger isDismissable>
      <TooltipTrigger>
        <Button>Proceed</Button>
        <Tooltip>Test tooltip</Tooltip>
      </TooltipTrigger>
      {(close) => (
        <Dialog>
          <Header>
            <Heading>Important Message</Heading>
          </Header>
          <Content>
            <Paragraph>You are awesome!</Paragraph>
          </Content>
        </Dialog>
      )}
    </DialogTrigger>
  );
}

function Example() {
  return (
    <DialogTrigger isDismissable>
      <TooltipTrigger>
        <Button>Proceed</Button>
        <Tooltip>Test tooltip</Tooltip>
      </TooltipTrigger>
      {(close) => (
        <Dialog>
          <Header>
            <Heading>Important Message</Heading>
          </Header>
          <Content>
            <Paragraph>You are awesome!</Paragraph>
          </Content>
        </Dialog>
      )}
    </DialogTrigger>
  );
}

function Example() {
  return (
    <DialogTrigger
      isDismissable
    >
      <TooltipTrigger>
        <Button>
          Proceed
        </Button>
        <Tooltip>
          Test tooltip
        </Tooltip>
      </TooltipTrigger>
      {(close) => (
        <Dialog>
          <Header>
            <Heading>
              Important
              Message
            </Heading>
          </Header>
          <Content>
            <Paragraph>
              You are
              awesome!
            </Paragraph>
          </Content>
        </Dialog>
      )}
    </DialogTrigger>
  );
}

Accessibility

A dialog should have a clear title, to inform users what the dialog is about. By default, the dialog sets its aria-labelledby to match the id of the provided heading. If there is no heading, you should specify an aria-label attribute.