Button
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.
Table of Contents
Edit this section, Opens in new windowOverview
Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.
Variations
The primary button is used for primary action. The button is used to dictate what the primary action of a view is. Never use more than one primary button for one view. Use sparingly.
The primary button is a filled button. The fill color used is BL 1, BLUE. The text color is BE 5, LIGHTEST BEIGE.
The secondary button is the default button. It is used for non-primary actions.
The secondary button is an outlined button. The outline and text color is BL 1, BLUE.
The text button is a button used for miniscule actions, or when a solid button is not wanted.
The text color is BL 1, BLUE.
The info button is used for the rare occasion when you want a button that stands out, when the primary button is not natural to use. Use sparingly.
The info button is a filled button. The fill color used is BR 1, BROWN. The text color is BE 5, LIGHTEST BEIGE.
Modes
Inverse
The Secondary, Text and Info button can be in inverse mode.
Usage
Buttons communicate actions that users can take.
Principles
- Buttons should indicate that they can trigger an action.
- Buttons should be easy to find among other elements, including other buttons.
- A button's action and state should be clear.
Text label
Text labels describe the action that will occur if a user taps a button. If a text label is not used, an icon should be present to signify what the button does. Text labels should be short, concise and descriptive.
Sizing
Buttons have a minimum width of 48px, and a maximum width of 320px. Other than that, the width is set to grow with the length of the text.
Buttons can also be larger or smaller, with a maximum height of 64px and a minimum height of 24px. Usage of larger buttons are very strict, and in most cases should be avoided.
A single primary button
A layout/view should contain a single primary button that makes it clear that other buttons have less importance in the hierarchy. This primary button commands the most attention.
Other buttons
An view can show more than one button in a layout at a time, so a primary button can be accompanied by secondary or text buttons that perform less important actions.
Placement
With icons
All buttons can have icons.
Placement
It is preferred that icons are placed to the left of the text. In some occasions, like with navigational buttons, you can place arrows to the right.
Anatomy
- Border
- Transparent background
- Text label
- Icon (optional)
- Border
- Transparent background
- Text label
- Transparent background
- Text label
- Filled background
- Text label
- Filled background
- Text label