Contextual help button

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

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

Do

  • Click area should be minimum 32 x 32 px

Don't

  • Avoid the sprinkler-effect where every component has a help button. Use a page help instead

 

Specification