Modal
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
Modal dialog
Variants
Overflowing content
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.
Alert Modal dialog
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.
Large Modal dialog
A large dialog is a modal that is wide on tablet and desktop screens