# Button.

## Overview

### What does the component do?

- It triggers an action.

### When should the component be used?

- When starting or ending a process.
- When sending a form.
- When selecting a function.

### Rules

- It cannot be used within body copy.
- The text is always single-line.
- Only one primary button can be used per page/dialogue.
- Several secondary buttons are permitted per page/dialogue.
- Secondary buttons can only be used if a primary button already exists.

## Variants

### States

The component has the following states:

- Normal
- Pressed
- Disabled
- Loading

### Variants

#### Primary

![Image of the Primary Button](https://digital.sbb.ch/assets/images/mobile/Primary-light.webp "Primary button")

![Image of the Primary Button](https://digital.sbb.ch/assets/images/mobile/Primary-dark.webp "Primary button")

- Full width of the screen or modal dialogue (minus spacing).

#### Secondary

![Image of the secondary button](https://digital.sbb.ch/assets/images/mobile/Secondary-light.webp "Secondary button")

![Image of the secondary button](https://digital.sbb.ch/assets/images/mobile/Secondary-dark.webp "Secondary button")

- Full width of the screen or modal dialogue (minus spacing).

#### Tertiary

##### Label and Icon

![Darstellung des tertiary button with label and icon](https://digital.sbb.ch/assets/images/mobile/Tertiary-label-and-icon-light.webp "Tertiary button with label and icon")

![Darstellung des tertiary button with label and icon](https://digital.sbb.ch/assets/images/mobile/Tertiary-label-and-icon-dark.webp "Tertiary button with label and icon")

##### Label

![Image of the tertiary button with label](https://digital.sbb.ch/assets/images/mobile/Tertiary-label-light.webp "Tertiary button with label")

![Image of the tertiary button with label](https://digital.sbb.ch/assets/images/mobile/Tertiary-label-dark.webp "Tertiary button with label")

##### Icon

![Image of the tertiary button with icon](https://digital.sbb.ch/assets/images/mobile/Tertiary-icon-light.webp "Tertiary button with icon")

![Image of the tertiary button with icon](https://digital.sbb.ch/assets/images/mobile/Tertiary-icon-dark.webp "Tertiary button with icon")

#### Tertiary small

##### Label and Icon

![Image of the tertiary button, small with label and icon](https://digital.sbb.ch/assets/images/mobile/Tertiary-small-label-and-icon-light.webp "Tertiary button with label and icon")

![Image of the tertiary button, small with label and icon](https://digital.sbb.ch/assets/images/mobile/Tertiary-small-label-and-icon-dark.webp "Tertiary button with label and icon")

##### Label

![Image of the tertiary button, small with label](https://digital.sbb.ch/assets/images/mobile/Tertiary-small-label-light.webp "Tertiary button, small with label")

![Image of the tertiary button, small with label](https://digital.sbb.ch/assets/images/mobile/Tertiary-small-label-dark.webp "Tertiary button, small with label")

##### Icon

![Image of the tertiary button, small with icon](https://digital.sbb.ch/assets/images/mobile/Tertiary-small-icon-light.webp "Tertiary button, small with icon")

![Image of the tertiary button, small with icon](https://digital.sbb.ch/assets/images/mobile/Tertiary-small-icon-dark.webp "Tertiary button, small with icon")

### Specification

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

---

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