Component

Segmented control

Also known as: Toggle button group

A hybrid somewhere between a button group, radio buttons, and tabs; segmented controls are used to switch between different options or views.

28 Examples

Filter:

  • Segmented

    Ant Design

    Tech

    • React

    Features

    • Code examples
    • Accessibility issues
    • Open source

  • Segmented Control

    Base Web

    Tech

    • React
    • CSS-in-JS

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Segmented control

    Blueprint

    Tech

    • React
    • Sass

    Features

    • Open source

  • Content switcher

    Carbon Design System

    Tech

    • React
    • Vanilla JS
    • Angular
    • Vue
    • Svelte
    • Web Components

    Features

    • Code examples
    • Usage guidelines
    • Open source

  • Toggle button

    Cedar

    Tech

    • Vue
    • Sass
    • CSS Modules

    Features

    • Usage guidelines
    • Code examples
    • Open source

  • Segmented Control

    Chakra UI

    Tech

    • React
    • CSS-in-JS

    Features

    • Code examples
    • Open source

  • Switch

    Coral

    Tech

    • React

    Features

    • Code examples
    • Tone of voice
    • Open source

  • Segmented button

    eBay Playbook

    Tech

    • HTML
    • React

    Features

    • Code examples

  • SelectGroup

    Elisa Design System

    Tech

    • React

    Features

    • Usage guidelines
    • Code examples
    • Accessibility

  • Switch

    Geist Design System

    Tech

    • React

    Features

    • Code examples

  • SegmentedControl

    Gestalt

    Tech

    • React
    • CSS

    Features

    • Code examples
    • Open source
    • Usage guidelines

  • Chunky buttons

    giffgaff design system

  • Toggle button

    Luna

    Tech

    • React
    • Sass

    Features

    • Usage guidelines
    • Code examples
    • Tone of voice

  • Segmented Button

    Morningstar Product System

    Tech

    • Vue

    Features

    • Usage guidelines

  • Radio Panel

    Nessie

    Tech

    • Web Components
    • Tailwind CSS

    Features

    • Usage guidelines
    • Code examples

  • Segmented control

    Pajamas

    Tech

    • Vue

    Features

    • Usage guidelines
    • Code examples
    • Open source

  • Toggle group

    PatternFly

    Tech

    • React
    • Sass

    Features

    • Tone of voice
    • Open source
    • Usage guidelines

  • Toggle button group

    Pharos

    Tech

    • Web Components
    • Sass

    Features

    • Usage guidelines
    • Open source
    • Code examples
    • Accessibility
    • Tone of voice

  • Segmented Control

    Porsche Design System

    Tech

    • Web Components
    • Angular
    • React
    • Vue

    Features

    • Code examples
    • Open source

  • Segmented control

    Primer

    Tech

    • React

    Features

    • Code examples
    • Open source

  • Button toggle

    Quasar Framework

    Tech

    • Vue

    Features

    • Accessibility issues
    • Code examples
    • Open source

  • Toggle group

    Radix Primitives

    Tech

    • React

    Features

    • Code examples
    • Open source

  • Radio Button Group

    Ruter Components

    Tech

    • React

    Features

    • Code examples
    • Unmaintained

  • Segmented control

    SEB Design Library

    Tech

    • Sass
    • React
    • Angular

    Features

    • Code examples
    • Usage guidelines

  • Segmented Control

    Seeds

    Tech

    • React

    Features

    • Code examples
    • Usage guidelines
    • Tone of voice

  • Toggle button

    Visa Product Design System

    Tech

    • Angular
    • React
    • CSS
    • Mobile

    Features

    • Code examples
    • Usage guidelines
    • Accessibility
    • Open source

  • Segmented options

    W3C design system

    Tech

    • Sass
    • Vanilla JS

    Features

    • Code examples
    • Usage guidelines
    • Open source
    • Accessibility

  • Segmented control

    Workday Canvas Design System

    Tech

    • React

    Features

    • Usage guidelines
    • Accessibility
    • Tone of voice
    • Open source

Related components

  • Radio button

    Radio, Radio group

    Radio buttons allow a user to select a single option from a list of predefined options.

  • Button group

    Toolbar

    A wrapper for multiple, related buttons.

Name distribution