Dialog

Dialog are part of a collection of components, also including Modal, Sheet and Drawer, that overlay content on top of a full-page view and often block the UI below. Dialogs are used to interrupt the user with a mandatory confirmation or action.

Figma

React

Bootstrap

Native

Design guidance

When and how to use this

The Dialog is essentially a speed bump along the user's journey. Use a Dialog when the user needs to confirm an action, as in the case of a destructive action like deleting something.

When to consider something else

If the user needs to fill out a form or complete another task, use a Modal, or if the task is a more complex or lengthy one, consider a Drawer.

Figma

Drag in a Dialog from the Modals v2 library in the Assets pane in your Figma file. You will need to separately drag in a ModalOverlay to go behind the Dialog in your design. We provide 3 size variants that correspond with those found in our React Dialog component, with Medium as the default. Note that after choosing the appropriate size variant for your use case, you may want to detach the component instance in order to work with the content in the Dialog, although if your content is simple text you should not need to detach.

React

Dialog composes Chakra’s AlertDialog. We offer size variants that align with those in the Figma component; the default uses media queries to set the size based on the user's viewport. No header is provided by default, but you should supply this for nearly every use case.

Button text for Dialog is set by default: the confirm button is set to "Okay" and the cancel button is set to "Cancel". Use confirmText and cancelText to customize these. To further customize these buttons, you can use confirmProps and cancelProps. If the confirmation action is destructuve (i.e. if the action confirms the deletion of an item), pass isDestructive.

Use onConfirmClick and onCancelClick to associate actions with the dismissal of the Dialog.

live

() => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <>
      <Dialog
        confirmText="Fire Lasers"
        cancelText="Nevermind"
        header="Spectacular Header"
        isOpen={isOpen}
        onClose={onClose}
        onConfirmClick={() => console.log('⚡')}
      >
        Lorem ipsum dolor sit amet consectetur adipiscing elit. Amet consectetur
        adipiscing elit quisque faucibus ex sapien. Quisque faucibus ex sapien
        vitae pellentesque sem placerat. Vitae pellentesque sem placerat in id
        cursus mi.
      </Dialog>
      <Button iconBefore={iMaximize} onClick={onOpen} shape="box">
        Click me to see a Dialog
      </Button>
    </>
  );
};

Prop	Description
`size`	Sets a specific size for the Dialog. Valid values are `sm all`, `medium`, `large`, `full` or `auto`. See the Modal size section for mor e information on sizing.
`confirmText`	Sets the text of the confirmation button. Defaults to "Okay".
`cancelText`	Sets the text of the cancel button. Defaults to "Cancel".
`isDestructive`	Pass this if the confirmation action is destructive, and the confirmation button will be set to the appropriate style.

Bootstrap

We do not currently ship a Bootstrap equivalent to Dialog, but you could consider using its Modal instead, specifying .btn-danger rather than .btn-primary on the confirmation button in cases where the action would be destructive.

Blueprint

Settings