components / Structure

Modal

Default Modal

Size

Modals have four sizes depending on the width of content that needs to be displayed. Medium is the default size.

Scrolling Content

When the content of the modal is larger than the screen supports, it becomes scrollable with consistent spacing between the screen edge and the modal.

Non-closable Modals

For mandatory workflows and notifications, we can also remove the close functionality. The close button in the Modal Header does not appear and clicking on the backdrop doesn't do anything.

The Modal Footer can have a few layouts depending on the needs of the Modal. Usually they fall into one of these four layouts.