Navigieren auf digital.sbb.ch

Beta

Button

1. What does the element do?

  • It triggers an action.

2. When should the element be used?

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

3. 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 and frameless buttons can only be used if a primary button already exists.

4. Variants and statuses

The element has the following statuses:

  • Normal
  • Pressed
  • Disabled

4.1. Primary button

Image of the primary button
  • Full width of the screen or modal dialogue (minus spacing).

Design Spezifikation

4.2. Secondary button

Image of the secondary button
  • Full width of the screen or modal dialogue (minus spacing).

Design Specification

4.3. Icon button

4.3.1. Free

Image of the icon button free

Design Specification

4.3.2. In forms

Image of the icon button in forms

Design Specification

4.4. Frameless primary button

4.4.1. Large

Image of the frameless primary button large

Design Specification

4.4.2.  Small

Image of the frameless primary button small

Design Specification

4.5. Frameless secondary button

  • Is only permitted in combination with the frameless primary button.
  • Is only permitted in modal dialogues.
  • Is positioned on the left in the dialogue.
  • If there are several buttons (frameless secondary) they are all right-aligned.

4.5.1. Large

Image of the frameless secondary button large

Design Specification

4.5.2. Small

Image of the frameless secondary button small

Design Specification