# Segmented control

Segmented control allows users to select a single option, immediately changing the display to reflect their selection. It is used for switching views or view options, not for navigation.


## Overview

### Size

The segmented control comes in two sizes large (default) and small.

### Behaviour

Component acts as button and trigger a change on click. By default the first item is selected. Only one segment can be active simultaneously.

### Icons

Each segment button has optional leading and trailing icons. Use icons when you need to reinforce the meaning of the label.

### Overflow

Segments can have different widths depending on the content. If there are too many segments to fit in the container, scroll buttons will appear to the left and/or right.

Segment width can also be controlled individually.

### Do's and don'ts


## UX Guidelines

### Writing UX text for segmented controls