Navigieren auf


Segmented Button

1. What does the element do?

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

2. When should the element be used?

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

3. Rules

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

4. Variants and statuses

The element has the following statuses:

  • Checked
  • Unchecked

4.1 Segmented button

Image of the segmented button
  • The text is always single-line.

Design Specification

4.2 Segmented icon button

Image of the segmented icon button

Design Specification