Segmented Control
Quoting from Apple's Human Interface Guidelines, "a segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button. Within the control, all segments are equal in width. Like buttons, segments can contain text or images. Segmented controls are often used to display different views. In Maps, for example, a segmented control lets you switch between Map, Transit, and Satellite views."
Usage
Note #1: Please add tabindex="0"
to your segmented-control-element
s to make them selectable via keyboard and to keep our sites accessible.
Note #2: This element provides only the styling, without any interactivity. To provide interactivity, just make sure to apply the class segmented-control-element--active
to the element that you want highlighted.