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.


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.

Segmented control


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 (just like buttons).


  • See Button states

Segmented control - states

Above, example from SEB


Above, example from IOS design


Above, example found in Google land