Dialog

The modal dialog (or modal as we call it) is used to capture attention so users are informed about a task, critical information or a decision they have to make. It usually resides on the top of a page.

When modals are active, users are unable to see the content that's currently on the page. They also won't be able to return to what they were previously doing until the modal is dismissed or a task/decision is completed.

As experienced astronauts, we recommend using modals sparingly. They are effective when used correctly, but they can also be disruptive.

When to use a modal dialog

Modals should only be used when an almost-instant response is required from the user. The task within the modal should also be short and non-recurring. Should the task be a recurring one, this has to be done differently.

Presenting critical information

Use modals to present critical urgent information to the user, e.g. system errors or something that has happened as a result of their action.

Confirming user decisions

Confirming user decisions can be done with a modal. It's important to ensure that the decision, and any potential actions that may result from it, is clearly explained within the modal.

About RTL and icon mirroring

The icons are slots passed to the component. It is the developer's responsibility to pass a mirrored icon for RTL views, (ie, pass left or right arrows depending on the direction).