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.
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.
Pass a configuration object for the buttons. By default, the
cancelButton will be of type
neutral with the text "Cancel". Configuration for
confirmButton is required; the
purpose can be any CtaButton purpose.
A large dialog is a modal that is wide on tablet and desktop screens