# Stepper.

## Übersicht

### Was macht die Komponente?

- Anzeigen von einem Ablauf.

### Wann soll die Komponente eingesetzt werden?

- Bei Prozessen, welche mindestens zwei Schritte haben.

### Regeln

- Wird bei mindestens zwei und maximal sechs Schritten eingesetzt.
- Abgeschlossene Schritte werden gekennzeichnet.

## Varianten

Die Komponente hat folgende Zustände:

- Numeric
- Icon
- Default: Verwendung im Content
- Red: Verwendung im Header

### Varianten

Die Komponente hat folgende Varianten:

- Resizing: Fixe oder Volle Breite
- Type: Numerisch oder mit Icons
- Anzahl Schritte: 2 bis 6

#### Default

![Darstellung des Stepper](https://digital.sbb.ch/assets/images/mobile/stepper-default-light.webp "Darstellung des Stepper")

![Darstellung des Stepper](https://digital.sbb.ch/assets/images/mobile/stepper-default-dark.webp "Darstellung des Stepper")

#### Red

![Darstellung des Stepper auf roten Hintergründen](https://digital.sbb.ch/assets/images/mobile/stepper-red-light.webp "Darstellung des Stepper auf roten Hintergründen")

![Darstellung des Stepper auf roten Hintergründen](https://digital.sbb.ch/assets/images/mobile/stepper-red-dark.webp "Darstellung des Stepper auf roten Hintergründen")

### Spezifikationen

[Design](https://www.figma.com/design/ZBotr4yqcEKqqVEJTQfSUa/Design-System-Mobile?m=auto&node-id=330-13155&t=rQTLXnChqHrpKLB4-1)

---

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