Modal

Modals are used to display content or views that are separate from the rest of the app or page.

Default

The default modal has a title and a close button. On mobile viewports, it always occupies the entire screen. On desktop viewports, it comes in two widths: regular and wide.

Wide

Text button

Modals can be configured to display the close button as text - useful for when a close icon doesn't fit the context.

Full screen

Modals are always full screen on mobile.

They can be configured to occupy the full screen on desktop too. This should only be used in exceptional circumstances as part of a considered workflow.