Overview
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.
- Cancelling and 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. Ancillary button types can be used in either progression.
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. |
Ancillary Buttons
Type | Example | Emphasis | When to use |
---|---|---|---|
Icon Only |
| Medium | Primary use is in-line or in “Button Groups.” |
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. |
Note: A yellow button in the Trimble brand color can be used only in special use cases.
What's Changed
Date | Version | Notes | Contributors |
---|---|---|---|
04/07/2020 | 1.0.1 | Light gray button added to the color progression. | E. Bohn, E. Gunther, L. Cook |
11/23/2020 | 1.0.0 | Two progressions identified for clarity of use. Custom focus states added for accessibility. | E. Bohn, E. Gunther, L. Cook, L. Kause, S. Williams |
Was this page helpful?
Thanks for your feedback!