Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Dialogue

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

Guidelines

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. 

Above: "Cancel this application". This dialogue is presented after the user has clicked on the Close-button in an application flow.

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.

Behaviour

Can not be dismissed by clicking outside - the user is "forced" to take action. The content behind the overlay is locked and can not be scrolled.

The action of the primary button should confirm the user action that triggered the dialogue. Even if we suspect that the user do not understand that. For example, when a user is choosing an action that will delete an account and we want to verify that the user really want to do that, the primary button should be “Delete” (action), not “Cancel” (back away).

Specification

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

For mobile

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

Copy

Copy

The title of the dialogue should be a statement referring to the action that will happen – not a question (“Are you sure…?”)

The text should explain the action and it’s consequences.

The UI controls should confirm the possible actions, where the action of the primary button is the same as the action that triggered the dialogue. It could be, but do not need to be, the same text as the headline.

Page last updated

Feedback

Was this helpful?