A hybrid somewhere between a button group, radio buttons, and tabs; segmented controls are used to switch between different options or views.
Component
Segmented control
Other names: Toggle button group
15 examples
Switch
Coral
Talend
- React
- Code examples
- Tone of voice
SelectGroup
Elisa Design System
- React
- Usage guidelines
- Code examples
- Accessibility
Segmented Control
Evergreen
Segment
- React
- Open source
SegmentedControl
Gestalt
Pinterest
- React
- CSS
- Code examples
- Open source
Chunky buttons
giffgaff design system
- Usage guidelines
- Code examples
Button select
Goldman Sachs Design System
- Tone of voice
- Usage guidelines
Toggle button
Luna
Sainsbury’s
- React
- Sass
- Usage guidelines
- Code examples
- Tone of voice
Toggle button group
Pharos
JSTOR
- Web Components
- Sass
- Usage guidelines
- Open source
- Code examples
- Accessibility
- Tone of voice
Button toggle
Quasar Framework
- Vue
- Accessibility issues
- Code examples
Toggle group
Radix Primitives
Modulz
- React
- Code examples
- Open source
Radio Button Group
Ruter Components
- React
- Code examples
Segmented control
SEB Design Library
Skandinaviska Enskilda Banken
- Sass
- React
- Angular
- Code examples
- Open source
- Usage guidelines
Segmented Control
Seeds
Sprout Social
- React
- Code examples
- Usage guidelines
- Tone of voice
Switch
Vercel Design
- React
- Code examples
Segmented options
W3C design system
- Sass
- Vanilla JS
- Code examples
- Usage guidelines
- Open source
- Accessibility
