'%20stroke='%23E0E0E0'%20stroke-width='2'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_2682_149131'%20x1='7'%20y1='4'%20x2='23.0784'%20y2='26.6541'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%233A3AEA'/%3e%3cstop%20offset='0.592633'%20stop-color='%23DF13F9'/%3e%3cstop%20offset='0.763157'%20stop-color='%23F0558E'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
Components · Segmented control
Segmented control
Etesie extension: a single-select switcher with a sliding indicator. Material has no such component — its segmented button is deprecated. Reach for the connected button group when the choice is an action, and tabs when it switches views; use this only where the sliding indicator itself carries meaning.
Anatomy
- 1
.segment-group-rootSegment collection and indicator boundary. - 2
.segment-group-itemOne selectable segment. - 3
.segment-group-indicatorMoving selected-segment surface.
When to use
Use this Etesie extension only when switching destinations and the moving indicator itself conveys useful continuity.