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.

Contextual help button

A button that will present an explanation to a problem/question.

Guidelines

Short description

A button that presents an explanation to a problem/question through click or hover.

When and how to use it

We use this component when there is a need to explain something, with a few words or with more text. If many help buttons are needed, consider using one button on a page-level instead, to avoid the sprinkler-effect.

Behaviour

The contextual help button presents an explanation to a problem/question in two ways; either through:

  • Hover (= click on mobile) that shows the user a tooltip (short text)
  • Click that takes the user to slide-out modal (longer text)

Short texts

Hover on the button to present at tooltip. Use this for texts up to 140 characters.

Longer texts

Click on the button to present a slide-out modal for help texts or other longer texts. For desktop, it is common to also use a tooltip, that on hover tells what will happen on click.

Page help

Page help has not been designed more than this. Please let us know if you have any feedback: designlibrary@seb.se

Placement

Forms

Use icon size 16 px. Place the component next to the field label (desktop) or after the form field (mobile). 

Above: Next to a label in a form for desktop

Above: After the form field in a form for mobile

Lists 

Use icon size 16 px. Place the component next to the label or in a separate colulmn.

Above: Next to the label in a list

Above: In a separate column in a list

Widgets

Use icon size 20 px.

Page

Use icon size 20 px.

 

Do's and don'ts

  • Click area should be minimum 32 x 32 px
  • Avoid the "sprinkler-effect" where every component has a help button. Use a page help instead.
Specification

Icon

States

  • Icon: Dark blue 2
  • Tooltip: Grey 900

 

  • Dark blue 2
  • Grey 900

Related patterns & components

Page last updated

Feedback

Was this page helpful?