Overview
Buttons express what action will occur when the user clicks or touches it. Buttons are used to initialize an action, either in the background or foreground of an experience.
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
Primary Buttons
Use to draw attention to the primary action on a screen. There are four types of primary mobile buttons:
- Default Mobile Buttons
- Stacked Mobile Buttons
- Pill Buttons
- Floating Action Buttons
Type | Example | Emphasis | When to use |
---|---|---|---|
Default Button | High | Use to draw attention to the primary action on a screen. You may choose a Default or Pill style for your primary buttons, but NOT BOTH. | |
Stacked Mobile Button | High | Use as a primary button with a leading icon, if horizontal screen space is limited (e.g., in bottom/ footer navigation). | |
Pill Button | High | Use to draw attention to the primary action on a screen. You may choose a Default or Pill style for your primary buttons, but NOT BOTH. | |
Floating Action Button | High | Use a FAB for the most common or important action on a screen. Icons in a FAB must be clear and understandable since these buttons do not have a text label. The FAB should persist on the screen when content is scrolling (e.g., "float" above all other content). |
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. |
What's Changed
Date | Version | Notes | Contributors |
---|---|---|---|
01/16/2023 | 1.0.0 | New component added. | D. Bedick, E. Bohn, N. Cadsawan, E. Gunther, J. A. Provin Silva, L. Saenz, C. Starbird, R. Stillwell, S. Kaukonen, N. Byati |
Was this page helpful?
Thanks for your feedback!