Button

Buttons allow users to interact with your system.

Usage

When to use

Use a button in situations where the user needs to trigger an immediate action such as:

  • Submission of a form.
  • Initiation of a new task or process step.
  • Display of information that was hidden before.

This is often the case in a form, dialog or alongside of a table.

If the action is to forward the user to another page, you should not use a button. Use a hyperlink instead.

General construction

A button consists of the following elements:

button-usage-general-construction
1. Icon, 2. Label, 3. Background

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.

Types

There are the following button types:

Primary button

  • The primary button is used to attract attention for the most important action on the screen.
  • A primary button should not be placed more than once on a page.
  • 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.

button-usage-type-primary
Primary button without and with icon

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.

button-usage-type-secondary
Secondary button without icon, with icon and icon only

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.

button-usage-type-ghost-v2
Ghost button without icon, with icon and icon only

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.

button-usage-type-split
Split button with drop-down list

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 filled icon and a bold label.
  • Use a primary content action sparingly on the screen.

button-usage-primary-content-action
Primary content action

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.

button-usage-content-action
Content action

Do’s & Don’ts

button-usage-do-stay-consistent
button-usage-do-not-mix-up

  • Be consistent in the way you show buttons.
  • Don’t mix up different kinds of button visualization.

button-usage-do-label-button
button-usage-dont-label-button-wrong

  • 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 MindSphere Design System.

Overview

Primary button

button-style-overview-primary
1. standard, 2. mouseover, 3. pressed, 4. disabled, 5. focus

button-style-overview-primary-icons
1. Primary button with icon

Secondary button

button-style-overview-secondary
1. standard, 2. mouseover, 3. pressed, 4. disabled, 5. focus

button-style-overview-secondary-with-icon
1. Secondary button with icon, 2. Secondary button icon only, 3. Go-to button

Ghost button

button-style-overview-ghost
1. standard, 2. mouseover, 3. pressed, 4. disabled, 5. focus

button-style-overview-ghost-with-icon
1. Ghost button icon only, 2. Go-to ghost button

Primary content action

button-style-overview-pca
1. standard, 2. mouseover, 3. pressed, 4. disabled, 5. focus

Content action

button-style-overview-ca
1. standard, 2. mouseover, 3. pressed, 4. disabled, 5. focus

Split button

button-style-overview-split-button
1. Default state, 2. Drop-down list with additional actions

Button group

button-style-overview-buttongroup
1. Button group secondary, 2. Button group ghost

Color

The following table gives reference to the different colors and shades used in the component:

Name State Property Color name
Primary button standard, focus Background color State blue 100
Primary button mouseover Background color Cool blue
Primary button pressed Background color State blue 250
Primary button disabled Background color Gray 400
Primary button focus Border color Cool blue
Primary button standard,
mouseover,
pressed,
disabled
Foreground color White
Secondary standard,
mouseover,
pressed,
focus
Border color,
Foreground color
State blue 100
Secondary mouseover Background color State blue
Secondary pressed Background color State blue 050
Secondary disabled Border color,
Foreground color
Gray 400
Secondary focus Border color Cool blue
Secondary standard,
mouseover,
pressed
Foreground color State blue 100
Ghost standard,
mouseover,
pressed,
focus
Foreground color State blue 100
Ghost mouseover Background color State blue
Ghost pressed Background color State blue 050
Ghost disabled Foreground color Gray 400
Ghost focus Border color Cool blue
Primary content action,
Content action
standard, focus Foreground color State blue 100
Primary content action,
Content action
mouseover Foreground color Cool blue
Primary content action,
Content action
pressed Foreground color State blue 250
Primary content action,
Content action
disabled Foreground color Gray 400
Primary content action,
Content action
focus Border color Cool blue
Split Button Same as Secondary
button in all states
   
Button group secondary standard,
mouseover,
pressed,
disabled
Border color Gray 400
Button group secondary mouseover Background color Gray 100
Button group secondary pressed Background color Gray 200
Button group secondary,
Button group ghost
disabled Foreground color Gray 400
Button group secondary,
Button group ghost
standard,
mouseover,
pressed
Foreground color Gray 800
Button group ghost mouseover Background color Gray 100
Button group ghost pressed Background color Gray 200
Button group ghost disabled    
Button group ghost mouseover,
pressed
Border color Gray 400

Typography

The following table gives reference to the different font sizes and weights used in the component:

Name State Font-family Font-size Line-height Text-align
Primary button all Siemens Sans Regular 14px 16px center
Secondary button all Siemens Sans Regular 14px 16px center
Ghost button all Siemens Sans Regular 14px 16px center
Split button all Siemens Sans Regular 14px 16px center
Primary content action all Siemens Sans Bold 14px 16px left

Sizing and spacing

The following measurements show the dimensions for this component:

button-style-sizing
Sizing for primary and secondary button and content action

button-style-sizing-general
General spacing for primary and secondary button

button-style-sizing-ghost
Spacing for ghost button

button-style-sizing-pca-ca
Spacing for primary content action and content action

button-style-sizing-icon-button
Spacing for buttons with icon

button-style-sizing-spacing-split-button
Sizing and spacing for split button

button-style-sizing-outer-button
Outer spacing for buttons

Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top