# Button.

## Übersicht

### Was macht die Komponente?

- Löst eine Aktion aus.

### Wann soll die Komponente eingesetzt werden?

- Beim Starten oder Beenden eines Prozesses.
- Beim Absenden eines Formulars.
- Beim Aufrufen einer Funktion.

### Regeln

- Darf nicht innerhalb von Fliesstext eingesetzt werden.
- Der Text ist immer einzeilig.
- Pro Seite/Dialog darf nur ein Primary Button eingesetzt werden.
- Pro Seite/Dialog sind mehrere Secondary Buttons erlaubt.
- Secondary Buttons dürfen nur eingesetzt werden, wenn bereits ein Primary Button vorhanden ist.

## Varianten

### Zustände

Die Komponente hat folgende Zustände:

- Normal
- Pressed
- Disabled
- Loading

### Varianten

#### Primary

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

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

- Ganze Breite des Screens oder des modalen Dialogs (abzüglich Abstand).

#### Secondary

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

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

- Ganze Breite des Screens oder des modalen Dialogs (abzüglich Abstand).

#### Tertiary

##### Label und Icon

![Darstellung des Tertiary Buttons mit Label und Icon](https://digital.sbb.ch/assets/images/mobile/Tertiary-label-and-icon-light.webp "Tertiary Buttons mit Label und Icon")

![Darstellung des Tertiary Buttons mit Label und Icon](https://digital.sbb.ch/assets/images/mobile/Tertiary-label-and-icon-dark.webp "Tertiary Buttons mit Label und Icon")

##### Label

![Darstellung des Tertiary Buttons mit Label und Icon](https://digital.sbb.ch/assets/images/mobile/Tertiary-label-light.webp "Tertiary Buttons mit Label und Icon")

![Darstellung des Tertiary Buttons mit Label und Icon](https://digital.sbb.ch/assets/images/mobile/Tertiary-label-dark.webp "Tertiary Buttons mit Label und Icon")

##### Icon

![Darstellung des Tertiary Buttons mit Icon](https://digital.sbb.ch/assets/images/mobile/Tertiary-icon-light.webp "Tertiary Buttons mit Icon")

![Darstellung des Tertiary Buttons mit Icon](https://digital.sbb.ch/assets/images/mobile/Tertiary-icon-dark.webp "Tertiary Buttons mit Icon")

#### Tertiary small

##### Label und Icon

![Darstellung des Tertiary Small Buttons mit Label und Icon](https://digital.sbb.ch/assets/images/mobile/Tertiary-small-label-and-icon-light.webp "Tertiary Small Buttons mit Label und Icon")

![Darstellung des Tertiary Small Buttons mit Label und Icon](https://digital.sbb.ch/assets/images/mobile/Tertiary-small-label-and-icon-dark.webp "Tertiary Small Buttons mit Label und Icon")

##### Label

![Darstellung des Tertiary Small Buttons mit Label](https://digital.sbb.ch/assets/images/mobile/Tertiary-small-label-light.webp "Tertiary Small Buttons mit Label")

![Darstellung des Tertiary Small Buttons mit Label](https://digital.sbb.ch/assets/images/mobile/Tertiary-small-label-dark.webp "Tertiary Small Buttons mit Label")

##### Icon

![Darstellung des Tertiary Small Buttons mit Icon](https://digital.sbb.ch/assets/images/mobile/Tertiary-small-icon-light.webp "Tertiary Small Buttons mit Icon")

![Darstellung des Tertiary Small Buttons mit Icon](https://digital.sbb.ch/assets/images/mobile/Tertiary-small-icon-dark.webp "Tertiary Small Buttons mit Icon")

### Spezifikationen

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

---

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