Buttons allow users to trigger an action and come in a variety of shapes and colors.

Buttons – live examples

Buttons with semantics – live examples

Disabled buttons

When to Use

Use the button:

• To offer a single action, such as:
  Create, Edit, Save, Delete, Approve, Reject, Add, Remove, Cancel

Don’t use the button:

• To switch between different states. Use the toggle button or the switch instead.
• To show a group of options. Use the split button or the segmented button instead.

Anatomy

1. Background: Different background colors visualize the state of the button.
2. Text / Icon: Describes or visualizes the action that is triggered by the button.

Variants

Three button variants are available to indicate the action:

• Text only
• Icon only
• Text and icon

Button variants to visualize actions – live examples

(from top to bottom: text only, icon only, text and icon)

The button also visualizes the priority of the action. Three variants are available:

• Primary
• Secondary (= standard)
• Tertiary

Button variants for prioritization – live examples

(from top to bottom: primary, secondary, tertiary)

Related Links