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
26 examples
Segmented
Ant Design
Ant Financial
- React
- Code examples
- Accessibility issues
- Open source
Segmented Control
Base Web
Uber
- React
- CSS-in-JS
- Code examples
- Usage guidelines
- Open source
Content switcher
Carbon Design System
IBM
- React
- Vanilla JS
- Angular
- Vue
- Svelte
- Web Components
- Code examples
- Usage guidelines
- Open source
Toggle button
Cedar
Recreational Equipment, Inc.
- Vue
- Sass
- CSS Modules
- Usage guidelines
- Code examples
- Open source
Switch
Coral
Talend
- React
- Code examples
- Tone of voice
- Open source
Segmented button
eBay Playbook
- HTML
- React
- Code examples
SelectGroup
Elisa Design System
- React
- Usage guidelines
- Code examples
- Accessibility
Segmented Control
Evergreen
Segment
- React
- Open source
Switch
Geist Design System
Vercel
- React
- Code examples
SegmentedControl
Gestalt
Pinterest
- React
- CSS
- Code examples
- Open source
- Usage guidelines
Chunky buttons
giffgaff design system
- Usage guidelines
- Code examples
Toggle button
Luna
Sainsbury’s
- React
- Sass
- Usage guidelines
- Code examples
- Tone of voice
Radio Panel
Nessie
Nederlandse Spoorwegen
- Web Components
- Tailwind CSS
- Usage guidelines
- Code examples
Segmented control
Pajamas
GitLab
- Vue
- Usage guidelines
- Code examples
- Open source
Toggle group
PatternFly
Red Hat
- React
- Sass
- Tone of voice
- Open source
- Usage guidelines
Toggle button group
Pharos
JSTOR
- Web Components
- Sass
- Usage guidelines
- Open source
- Code examples
- Accessibility
- Tone of voice
Segmented Control
Porsche Design System
- Web Components
- Angular
- React
- Vue
- Code examples
- Open source
Segmented control
Primer
GitHub
- React
- Code examples
- Open source
Button toggle
Quasar Framework
- Vue
- Accessibility issues
- Code examples
- Open source
Toggle group
Radix Primitives
WorkOS
- React
- Code examples
- Open source
Radio Button Group
Ruter Components
- React
- Code examples
- Unmaintained
Segmented control
SEB Design Library
Skandinaviska Enskilda Banken
- Sass
- React
- Angular
- Code examples
- Usage guidelines
Segmented Control
Seeds
Sprout Social
- React
- Code examples
- Usage guidelines
- Tone of voice
Segmented options
W3C design system
- Sass
- Vanilla JS
- Code examples
- Usage guidelines
- Open source
- Accessibility
Segmented control
Workday Canvas Design System
- React
- Usage guidelines
- Accessibility
- Tone of voice
- Open source
