Segmented-Button Overview

What does the component do?

  • It is used for selecting exactly one from two or more options.

When should the component be used?

  • When selecting one of several options.
  • For switching between different views (tab function).

Rules

  • A default value must always be set.
  • The individual options are always the same width.
Variants

Variants

  • 2 or 3 buttons
  • Color: Default / Red
  • with icon and label / icon only / label only

Default

Image of the segmented buttons, default
Image of the segmented buttons, default

Red

Image of the segmented buttons, red
Image of the segmented buttons, red

Specification

Design