# Segmented-Button.

## Übersicht

### Was macht die Komponente?

- Dient zur Auswahl von genau einer Option aus zwei oder mehreren Möglichkeiten.

### Wann soll die Komponente eingesetzt werden?

- Bei der Auswahl einer Option aus Mehreren.
- Zum Umschalten zwischen unterschiedlichen Ansichten (Tab-Funktionalität).

### Regeln

- Es muss immer ein Default-Wert gesetzt sein.
- Die einzelnen Optionen sind immer gleich breit.
- Der Text ist immer einzeilig.

## Varianten

### Varianten

- 2 oder 3 Buttons
- Farbe: Default / Red
- mit Icon und Label / nur Icon / nur Label

#### Default

![Darstellung des Segmented Buttons](https://digital.sbb.ch/assets/images/mobile/segmented-button-default-light.webp "Segmented Button")

![Darstellung des Segmented Buttons](https://digital.sbb.ch/assets/images/mobile/segmented-button-default-dark.webp "Segmented Button")

#### Red

![Darstellung des Segmented Buttons, rot](https://digital.sbb.ch/assets/images/mobile/segmented-button-red-light.webp "Segmented Button, rot")

![Darstellung des Segmented Buttons, rot](https://digital.sbb.ch/assets/images/mobile/segmented-button-red-dark.webp "Segmented Button, rot")

### Spezifikationen

[Design](https://www.figma.com/design/ZBotr4yqcEKqqVEJTQfSUa/Design-System-Mobile?node-id=88-46&t=N7M8b5Y9aIJc4LzY-1)

---

Source: https://digital.sbb.ch/de/design-system/mobile/components/segmented-button/