Dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision.

Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref.
You can set this to a negative number to ignore the initial focus.

initialFocus

onClose

open

size

trigger

() => {
  const [open, setOpen] = useState<boolean>(false);

  return (
    <Box>
      <Dialog
        trigger={
          <Button data-testid="open-dialog" onClick={() => setOpen(true)}>
            Open Dialog
          </Button>
        }
        open={open}
        onClose={() => setOpen(false)}
      >
        <Dialog.Header>
          <Dialog.Header.Title title="Are you sure?" icon={IconGlobe} />
        </Dialog.Header>
        <Dialog.Content>
          Deleting a process will delete all associated process runs and work items but will not delete any connected robots or
          environments.
        </Dialog.Content>
        <Dialog.Actions>
          <Button variant="primary" onClick={() => setOpen(false)}>
            Delete
          </Button>
          <Button variant="secondary" onClick={() => setOpen(false)}>
            Cancel
          </Button>
        </Dialog.Actions>
      </Dialog>
    </Box>
  );
}

Dialog

() => {
  const [open, setOpen] = useState<boolean>(false);

  return (
    <Dialog
      trigger={<Button onClick={() => setOpen(true)}>Open dialog</Button>}
      open={open}
      onClose={() => setOpen(false)}
      size="x-large"
    >
      <Dialog.Header>
        <Dialog.Header.Title title="Work items" icon={IconGlobe}>
          <Badge label="10" size="small" />
        </Dialog.Header.Title>
        <Dialog.Header.Description>ACME · Production</Dialog.Header.Description>
      </Dialog.Header>
      <Dialog.Content>Foo Bar</Dialog.Content>
      <Dialog.Actions>
        <Button variant="primary">Send message</Button>
        <Button variant="secondary">Cancel</Button>
      </Dialog.Actions>
    </Dialog>
  );
}

DialogExtraLarge

() => {
  const [open, setOpen] = useState<boolean>(false);

  return (
    <Dialog
      trigger={<Button onClick={() => setOpen(true)}>Open dialog</Button>}
      open={open}
      onClose={() => setOpen(false)}
      size="large"
    >
      <Dialog.Header>
        <Dialog.Header.Title title="Share Workspace items" header="ACME  ·  Production" icon={IconGlobe} />
        <Dialog.Header.Description>Run artifacts are logs and files that each run generates.</Dialog.Header.Description>
      </Dialog.Header>
      <Dialog.Content>
        <Box height={400}>Foo bar</Box>
      </Dialog.Content>
      <Dialog.Actions>
        <Button variant="primary">Send message</Button>
        <Button variant="secondary">Cancel</Button>
      </Dialog.Actions>
    </Dialog>
  );
}

DialogLarge

() => {
  const [open, setOpen] = useState<boolean>(false);

  return (
    <Dialog
      trigger={<Button onClick={() => setOpen(true)}>Open dialog</Button>}
      open={open}
      onClose={() => setOpen(false)}
      size="medium"
      width={600}
    >
      <Dialog.Header>
        <Dialog.Header.Title title="Header" icon={IconGlobe} />
        <Dialog.Header.Description>Run artifacts are logs and files that each run generates.</Dialog.Header.Description>
      </Dialog.Header>
      <Dialog.Content>
        <Box height={400}>Foo bar</Box>
      </Dialog.Content>
      <Dialog.Actions>
        <Button variant="primary">Send message</Button>
        <Button variant="secondary">Cancel</Button>
      </Dialog.Actions>
    </Dialog>
  );
}

Name	Description	Default
initialFocus	Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref. You can set this to a negative number to ignore the initial focus.	-
onClose required	Dialog window close callback	-
open	Dialog window open state	-
size	Dialog layout and size variants	-
trigger	Dialog's visibility trigger element	-

Dialog component

Dialog Extra Large

Dialog Large

Dialog Medium