Bain Logo


Jump to Props

Display a temporary view and request action from the user.

Dialogs are temporary, modal overlays that generally provide contextual information or require user confirmation/input. In most cases, Dialogs block interactions with the elements behind until being explicitly dismissed,or other actions performed.

They are primarily used for lightweight creation or edit tasks, and simple management tasks.

Note: If you want to implement a basic confirmation dialog, you should use the ConfirmDialogTrigger component which handles all of the opening and closing etc.



Most dialogs should have at least basic title, description and the 'close' button.

Opening and Closing

To be displayed, the dialog component takes a boolean isOpen prop.


Screen readers will be able to read your modal's title by default. When you pass a title to the Dialog, it is automatically made accessible by adding the aria-labelledby tag to the dialog and adding the same ID to the title.

If you add other content to the dialog, you should also set the id of the descriptive content and pass the id of that content to the ariaDescribedby prop in the Dialog.


You should generally aim to keep the Dialog as small as possible.

The Dialog component comes in 3 sizes:

  • sm - Small (440px default)
  • md - Medium (540px)
  • lg - Large (660px)
  • xl - Extra Large (800px)

Set this via the maxWidth prop on the Dialog component.

It is possible to pass in a custom maxWidth value, but it should be avoided as much as possible in order to keep consistency.


Pass the fullScreen prop to Dialog.


Often you'll want the user to respond to the dialog with an action. Wrap your elements in the <DialogActions> wrapper.

Hiding the close button

In some cases, you may wish to force the user to make a selection, and not just dismiss the modal. Pass the hideCloseButton prop to do this. Note that it's not common to do this.


  • Props
  • Styled Functions

Content to display in the dialog


The function to call after the dialog closes.


Text to display in the dialog's title.

maxWidthsm | md | lg | xl | {number}sm

Maximum width of the dialog. Sizes read from `theme.sizes.dialogWidths`.


Whether or not the dialog should fill the screen.


Option to hide the X icon in the top right corner


Attribute used to indicate the IDs of the elements that describe the object. Read more.

© 2021, Made with ❤️
by ADAPT @ Bain & Company
Privacy Policy