11.0.1

Dialog

Simple


Complex


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

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


This shows the different alert statuses that can be used for dialog boxes. These all have two buttons which is a default

Stacked Button Alert


This is designed to show you how the buttons can stack with different alert styles. It also has a link style for the buttons for the mobile views.