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.


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.


The component is basically two or more buttons joined as a group signifying that they are equal options of one question.

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.


  • Don’t use a segmented control for action, such as add and remove.

Related to



They come in different sizes (like buttons).


  • Height: 44 px
  • Font: 16 medium


  • Height: 24 px
  • Font: 12 medium



  • Sames as Button states

Above, example from SEB


Above, example from IOS design


Above, example found in Google land