# 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](https://digital.sbb.ch/assets/images/mobile/segmented-button-default-light.webp "Segmented Buttons, default")

![Image of the segmented buttons, default](https://digital.sbb.ch/assets/images/mobile/segmented-button-default-dark.webp "Segmented Buttons, default")

#### Red

![Image of the segmented buttons, red](https://digital.sbb.ch/assets/images/mobile/segmented-button-red-light.webp "Segmented Buttons, red")

![Image of the segmented buttons, red](https://digital.sbb.ch/assets/images/mobile/segmented-button-red-dark.webp "Segmented Buttons, red")

### Specification

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

---

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