Dialog

A Dialog appears on top of the main content to display required actions or additional information.

Overview / Hero - KL

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.

Overview / Anatomy - KL

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.

Overview / Alert - KL

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.

Overview / Confirm - KL

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.

Overview / Content - KL