11.12.1

Dialog

Simple


For the Rails version of the dialog kit, the clickable element being used to open the dialog must be given a open-dialog data attribute with a value that is the same as the id being given to the dialog itself. See code example below to see this in action.

Additionally, both the cancel button and the confirm button have optional id props which can be used to pass in a custom id to allow developers to target that button with custom javascript if needed (confirm_button_id and cancel_button_id).

Complex


The dialog kit also supports customizing your dialog with a compound component structure.
This allows for greater flexibility and more complex dialogs.

For the Rails version, when using the kit as a compound component it is necessary to pass the same value as the id for the dialog, the dialog header and the dialog footer in order for the opening and closing of the dialog to function as expected.

Sizes


Scrollable


The dialog will create a scroll container automatically when the text exceeds the height of the page.
No prop or configuration is needed.

Overlay Click


When shouldCloseOnOverlayClick is explicitly set to false, click events on the overlay will not close the modal.
By default, shouldCloseOnOverlayClick is set to true.

Status Alert


The Dialog kit also offers customizable Status Alert options as seen here.

For the rails version of the kit, when using custom confirm and cancel buttons as shown in these examples, the 'cancel' button must be given a close-dialog data attribute with a value that is the same as the id given to the dialog itself.

Stacked Button Alert


These examples highlight how the buttons within the Dialog can be stacked when using the Status Alert variant. It also has a link style for the buttons for the mobile views.

Full Height


To render a full height Dialog, use the fullHeight (react) or full_height (rails) prop. A full height Dialog can be size small, medium, or large. By default it will be center aligned.

Full Height Placement


The full height dialog is centered by default, but the placement can be changed via the placement prop with one of the following values: left, center, right.

The large variant however will always be centered, even if the placement prop is used.

All dialogs with the fullHeight prop will be displayed full-width on mobile screens.