Button
Buttons allow users to interact with your system.
Usage
When to use
Use a button in the following cases:
- In situations where the user needs to trigger an immediate action, for example:
- Submission of a form.
- Initiation of a new task or process step.
- Display information that was hidden before.
- If the action is to forward the user to another page, you should not use a button. Use a hyperlink instead.
Types
There are the following button types:
Primary button
- Use a primary button to attract attention for the most important action on the screen.
- Use a primary button sparingly on the screen.
- It usually contains a label, sometimes also an icon and never an icon without a label.
- The button’s background is filled to attract attention.
Secondary button
- A secondary button is used for regular, non-primary actions and it can be placed multiple times on one screen.
- It is the most commonly used button.
Ghost button
- A ghost button is used for less substantial actions that do not need to attract the user’s attention.
- It is recommended to use a label and an icon for a ghost button to make the button easier to detect.
Split button
With a split button the user can either trigger the button’s default action or open a drop-down list for more actions of which the user can select one.
Primary content action
- Primary content actions are used for main actions that affect the content on the current page.
- The changes made by primary content actions are usually contextual, such as adding a row to a table or adding an item to a list.
- A primary content action always consists of a solid icon and a bold label.
- Use a primary content action sparingly on the screen.
Secondary content action
- Use a secondary content action to add a common action that affects the content of the current page.
- It always consists of an icon and a label.
- A secondary content action can be used more frequently than a primary content action.
General construction
A button consists of the following elements:
1. Icon
- Icon and action should have a direct relation to each other.
- An icon can be used in addition to a label to increase the recall value of the button.
- Exclude the label in situations with limited screen space for common actions, as “Download” or “Edit”.
- The Icon should generally appear to the left of a label.
2. Label
- Labels should inform the user about what action he / she can expect.
- Be precise. Try not to use more than three words for a label.
- Describe the respective action with verbs and use title case for capitalization.
3. Background
- The background of a button should not contain more than one solid color.
- The background can either be filled, transparent or outlined.
- The correct selection, labeling and placement of buttons is essential for error prevention and a smooth user experience. When in doubt test your design with potential users beforehand.
- When arranging buttons be consistent with your choice of only showing labels, icons or both.
Do’s & Don’ts
- Be consistent in the way you show buttons.
- Don’t mix up different kinds of button visualization.
- Label buttons according to their action.
- Don’t use labels that don’t tell the user the action they trigger by clicking the button or even mislead him.
Style
This chapter shows several button styles in the design system.
Overview
Primary button
Secondary button
Ghost button
Primary content action
Secondary content action
Split button
Button group
Typography
The following table gives reference to the different font sizes and weights:
Name | State | Font-family | Font-size | Line-height | Text-align |
---|---|---|---|---|---|
Primary button | all | Siemens Sans Roman | 14px | 16px | center, left |
Secondary button | all | Siemens Sans Roman | 14px | 16px | center, left |
Ghost button | all | Siemens Sans Roman | 14px | 16px | center, left |
Split button | all | Siemens Sans Roman | 14px | 16px | center, left |
Primary content action | all | Siemens Sans Bold | 14px | 16px | left |
Secondary content action | all | Siemens Sans Roman | 14px | 16px | left |
Sizing and spacing
The following measurements show the dimensions for this component: