Bain Logo

Dialog

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.

Import

Use

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.

Accessibility

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.

Sizes

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.

Fullscreen

Pass the fullScreen prop to Dialog.

DialogActions

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

  • Props
  • Styled Functions
PropTypeDefaultDescription
childrenReactNode

Content to display in the dialog

onClosefunction

The function to call after the dialog closes.

titlestring

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`.

fullScreenbool

Whether or not the dialog should fill the screen.

hideCloseButtonbool

Option to hide the X icon in the top right corner

ariaDescribedBystring

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

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