BRAID
Braid Logo
 

Dialog

Open in Playroom

Alternatives

  • Drawer — For a larger amount of content.
  • Accordion — For revealing content inline with a strong visual treatment.
  • Disclosure — For revealing content inline with a light visual treatment.

Accessibility

Follows the WAI-ARIA Dialog (Modal) Pattern.
Due to the size of the Dialog, all entrance and exit animations adhere to the users reduce motion preference.

Title and description

The title prop provides an accessible name announced to the user when the Dialog is opened. Optionally, a description can be provided and will be announced by a screen reader as well as visually forming part of the header block.
Open in Playroom

Design considerations

Recommended for prompting the user to make a decision or confirm an action. For more detailed content or user input (e.g. forms), consider using a Drawer instead.

Development considerations

It’s recommended that you connect the Dialog’s open state to your router so that it can be closed via the browser’s back button.

Widths

There are a variety of standard widths to choose from, as well as content width for custom sizing based on the content of the dialog.
Open in Playroom

Illustrated dialogs

You can also provide an element to render at the top of the dialog via the illustration prop.
Open in Playroom

Customising the close behaviour

The onClose function is called when the user either click the close button inside the Dialog, or clicks on the backdrop outside the Dialog.
Translation hint The aria-label for the close button can be customised by providing a closeLabel prop.
Open in Playroom
To prevent the Dialog from closing, e.g. due to validation, this function should return false.
Open in Playroom

Scrollable dialogs

If the contents are unable to fit on the screen, dialogs become scrollable with a fixed close button.
If you need to display a large amount of content, consider using a Drawer instead.
Open in Playroom

Nested dialogs

Although supported, in order to keep experiences simple nesting Dialogs is not encouraged.
Open in Playroom