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

Design specification

• Default
• Hover
• On-Click
• Disabled

Code specification

• SBB Angular Component Library

4.2 Alternative primary button

Design specification

• Default
• Hover
• On-Click
• Disabled

Code specification

• SBB Angular Component Library

4.3 Secondary Button

Design specification

• Default
• Hover
• On-Click
• Disabled

Code specification

• SBB Angular Component Library

4.4 Ghost Button

Design specification

• Default
• Hover
• On-Click
• Disabled

Code specification

• SBB Angular Component Library

4.5 Icon Button

Design specification

• Default

• Hover

• On-Click

• Disabled

• When hovering over an icon button, a tooltip should be used to make the underlying action clearer.

Code specification

• SBB Angular Component Library

4.6 Multiple actions

• Default
• Hover
• Expanded