A modal dialog is a window that appears on top of the main content, disabling that content until the user explicitly interacts with the modal.

The purpose of modals is to facilitate the flow of the task by removing unnecessary elements and helping the user to focus on the task at hand.

Use them to:

confirm a destructive action
focus a member on a specific task, such as topping up their Smart Pay As You Go meter
provide extra information when an expander isn't big enough and you don't want to send the user to another page

The height of the modal is determined by the content. If the modal is too long to fit the screen, it goes below the fold. This way the user can tell that the content is longer than presented and that it needs to be scrolled to get into view.

Custom heading

By default, the heading size will be otter. But any Heading component can be passed with a different font size.

An alert dialog is a special-case dialog designed specifically to divert users' attention and interrupt the flow of the task to preseant a brief, important message.

Variants

Buttons

Pass a configuration object for the buttons. By default, the cancelButton will be of type neutral with the text "Cancel". Configuration for the confirmButton is required; the purpose can be any CtaButton purpose.

A large dialog is a modal that is wide on tablet and desktop screens