Buttons are clickable elements that are used to trigger actions. Buttons are used to initialize an action, either in the background or foreground of an experience. Use button labels wherever possible to express what action will occur, when the user interacts with a button.
Usage
Use when
Affording interaction to key behaviors and features.
Confirming or submitting information entered into a form.
Canceling an action.
Resetting a form or dataset.
Closing a container or section.
Opening a menu.
Moving forward or backward through a wizard-type workflow.
Creating an object within a group.
Applying a non-critical action to a dataset.
Don’t use when
Displaying a collection of links to sections. Use links instead.
Linking to an external site. Use links instead.
An action is less important. Consider using a link instead.
Presenting the user with one or more high or medium-high actions specific to a task.
Types
There are two button progressions you can choose from: structural and color progression. The choice should be based on the particular needs of the product’s intended usage, aesthetic, and/or target user’s needs. Use only one button progression in a single product.
Structural Progression
Example
Emphasis
When to use
High
Use to draw attention to the primary action on a screen. There should be
only one Primary Button on a page at a time. Not all screens require a
Primary Button.
Medium
Use for secondary actions on a screen. Outline-style buttons work well on colored, dark, or image backgrounds. Consider how the style of an outline button might better suit the page.
Medium
Used for secondary actions to establish additional visual hierarchy.
Low
Use in complex applications or smaller containers that require a minimal impact from button
color on the interface. They need to be offset from the rest of the UI
to promote visual prominence.
Color Progression
Example
Emphasis
When to use
High
Use to draw attention to the primary action on a screen. There should be
only one Primary Button on a page at a time. Not all screens require a
Primary Button.
Medium
Use for secondary actions on a screen. These Buttons can be used on
most pages without constrictions. They appear most often in high volume
use cases like Tables, or in an Action Bar. Consider using an outline
button on gray backgrounds.
Medium
Used for secondary actions to establish additional visual hierarchy or to use a secondary button that provides less emphasis.
Low
Use in complex applications or smaller containers that require a minimal impact from button color on the interface. They need to be offset from the rest of the UI to promote visual prominence.
Danger And Critical Action Buttons
Example
Type
Emphasis
When to use
Danger
High
Danger buttons have a different visual style to inform users of
potentially destructive actions they are about to take. If using the
danger button as a standalone, we recommend styling it as a secondary
button. Within a set, the danger button should be styled as a primary
button.
Critical action
High
Critical action buttons require users to press and hold for a defined amount of time a button in order to trigger a critical action that should only be performed with clear intent. It should be used when an action can lead to an outcome that cannot be undone, reversed and/or could potentially have destructive consequences, such as permanent deletion. Critical action buttons can be styled as danger, primary, or secondary buttons.
Special Button
Example
When to use
Only use in special cases and sparingly within an otherwise blue/gray UI in order to bring more attention to a particular action. It should not be used with primary or danger actions. It does not support borderless or outline variants.
Icon Buttons
Example
Type
When to use
Icon-only
Default option (Trimble Gray) recommended for most use cases.
Solid
Used to draw attention to primary or secondary action on a screen.
Outline
Used for secondary actions on a screen and/or used in-line as in Button Groups.
