Navigieren auf digital.sbb.ch

Beta

Button

1. What does the component do?

  • It triggers an action on a page.

2. When should the component be used?

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

3. Rules

  • Cannot be used within body copy.
  • Cannot be used in the header as navigation or a function.
  • The minimum width is 60px.
  • The width increases with the text length. The width is 100% for mobile views.
  • If the text is still too long when the maximum length is reached, it is shortened with “...”.
  • The text is always single-line.
  • Buttons are right-aligned in the viewport. The primary button is positioned to the left of the secondary button.

4. Variants and statuses

The component has the following statuses:

  • Default
  • Hover
  • On-click
  • Disabled

4.1 Primary button

Image of the primary button component

Design specification

Code specification

4.2 Alternative primary button

Image of the alternative primary button component

Design specification

Code specification

4.3 Secondary Button

Image of the secondary button component

Design specification

Code specification

4.4 Ghost Button

Image of the ghost button component

Design specification

Code specification

4.5 Icon Button

Image of the icon button component

Design specification

Code specification