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 forms.
  • When selecting a function on a page.

3. Rules

  • It cannot be used within body copy.
  • Cannot be used in the header as navigation or a function.
  • The minimum width is 60px, the maximum width is 400px.
  • The width increases with the text length. When used in the next best click (NBC) or in mobile views, the width is 100%.
  • If the text is still too long when the maximum length is reached, it is shortened with “...”.
  • The text is always single-line.
  • In exceptional cases, the arrow icon can be replaced with a different, suitable icon.
  • Only one primary button can be used per page.
  • Secondary, ghost and frameless buttons can only be used if a primary button already exists.

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 Secondary button

Image of the secondary button component

Design specification

Code specification

4.3 Ghost button

Image of the ghost button component

Design specification

Code specification

4.4 Frameless button

Image of the frameless button component

Design specification

Code specification