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.
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