Toggle button - will be removed

This button has a single select function, meaning only one can be chosen. The icons must relate to the choice or action they represent.

Short description

The purpose of this component is to emphasize to the user that this is an important choice. Use it on early in the user flow and allow other components to depend on the choise.

Since only one button can be active, try this component when you might normally think of using a set of radio buttons or a drop down list. An icon can contribute to the understanding of the options.

When and how to use it

Use this component in the beginning of, for example, collecting information from a user, but when different sub-questions will be asked based on the selected option. An example is in mortgage applications where the questions asked to the customer depend on what kind of accommodation they want to buy. 

Do's and don'ts

  • When needed, it could be used with check boxes, but the options are illustrated with icons and more than one could be selected at the time. An example is if the user could use what products or services they want in a package deal.

Related to

  • Radio buttons
  • Drop down menues

Specification

These are the sizes used in this case. Variations are ok.

  • Height: 76 pix
  • Width: 79 pix
  • Corner radius: 5
  • Font: SEB sans serif regular 13 pix
  • Icon: approx. 34 pix height

States

  • Normal: White #FFFFFF
  • Blue 0092E1
  • Hover: Blue #41B0EE
  • Selected: Blue: #007AC7