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.

Segmented control

A segmented control is a horizontal set of two or more segments. It's used as toggles for features or content, similar to radio buttons but more visible and promote exploration.

Guidelines

Short description

Segmented controls can be used when you want to help the user find particular data without changing the current view. It works as a filter on a set of data.

When and how to use it

Segmented controls are often used to display different views, without having an opinion on the available options.

Behaviour

The component is basically two or more buttons joined as a group. Its' behaviour is the same on any device. 

Do's and don'ts

  • Limit the number of segments to improve usability. Wider segments are easier to click/tap. A segmented control should have five or fewer segments.
  • Try to keep segment content size consistent within the component.
  • If an explanation is needed, it is possible to give the component a header

 

  • Don’t use a segmented control for action, such as add and remove.
  • The component is not a replacement for radio buttons

Specification

Measurements

Standard size
  • Height 2.75 rem (44 px)
  • Font: 16 px medium
Small size
  • Height 1.5 rem (24 px)
  • Font: 12 px medium

States

Examples

Examples

Above, examples from SEB

 

Above, example from IOS design

 

Above, example found in Google land

Related patterns & components

Page last updated

Feedback

Was this helpful?