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 ContentsEdit this section, Opens in new window
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.
The Secondary, Text and Info button can be in inverse mode.
Buttons communicate actions that users can take.
- 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 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.
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.
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.
All buttons can have icons.
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.