Anatomy
Depending on the purpose (also see the ‘Types’ section below) a dialog can be configured in several ways. A dialog always displays some kind of message and can optionally have actions to confirm (or cancel) what is presented. A dialog always contains a close action in order to dismiss it and go back to the previous state.
Types
A dialog can be used for several purposes: to alert about something urgent, to let the user confirm something or to display more information about a certain topic.
We offer a small and large version for each type (or better said ‘configuration’). The size also depends on the device. For example: a large scrollable dialog for content should be full screen on mobile devices.
Alert
An alert usually contains a brief message about an urgent topic, triggered by the system. Usually displayed at the small size.
Confirmation
Similar to an alert, with a slightly different purpose: to let the user confirm something. This could be either a short message or requires actual input like a form.
Content
In case you want to show more information to a user without leaving the current view/ flow, you can present them with a content dialog. A content modal could also be scrollable and just like the other dialogs it has a small and large size. A large scrollable dialog is full screen on small (mobile) devices.
