Dialogue

Use a dialog when confirmation is needed or when to alert the user to something.

Short description

Dialogues contain a headline, text and UI controls. They retain focus an required action has been taken. Use dialogues sparingly because they are interruptive to the user. 

Dialogue - desktop

Dialogue - mobile

When and how to use it

Use a dialogue when confirmation is needed. For example when deleting an account or removing a an item that is needed for something else not visible in this view.
They may also be used as a guide when an error has occurred that has a known way of handling the problem, for example when logging in.

Dialogue - example

Behaviour

Can not be dismissed by clicking outside. User needs to take action. The content behind the overlay is locked and can not be scrolled.

 

For desktop

  • Headline: 24 px, medium
  • Description: 16 px, regular (bold optional for highlighted message)
  • Dark overlay with transparency with the dialog on top, centered in the browser viewport

Specification

Dialog - desktop spec

States

Dialog - desktop states

For mobile

  • Headline: 24 px, medium
  • Description: 16 px, regular (bold optional for highlighted message)

Specification

Dialog - mobile spec

States

Dialog - mobile states