Buttons allow a user to submit or request information, make decisions, and for navigation.
Button hierarchy is established by whether a button is contained (i.e. with a background color) for most emphasis, or outlined (no background) for less emphasis, or text only for the least emphasis.
Buttons may be normal (40px high) or small (32px). Full-screen width buttons are only allowed on the XS grid (0-479). In all other cases, button width is determined by the length of the label plus minimum L/R padding.
All buttons have bold, ALL-CAPS labels.
All buttons have these states: disabled, active, hover/tap, and focused.
Buttons are normally 40px high, but a small 32px alternative may be used when vertical space is at a premium. Whichever size is used, use the same size for any associated elements like inputs and selects.
Special controls like the keyword search button, pagination controls, icon buttons, and menu buttons are always 32px high.
Contained buttons have the most emphasis and should be used for primary actions. When one button is needed (such as an “OK”) use a contained button.
An element cannot have more than one contained button.
Outlined buttons provide less emphasis. When two or more buttons without hierarchy are needed, use multiple outlined buttons, or multiple text buttons.
Text buttons have the least emphasis. When two buttons with hierarchy are needed (e.g. “SUBMIT” OR “CANCEL”), use a contained button for the primary action, and a text button for the secondary action.
When two or more buttons without hierarchy are needed, use multiple text buttons, or multiple outlined buttons.
These buttons can be used in a UI in addition to the core button hierarchy.
Auxiliary buttons are small, 24px high text buttons with short labels. They can be used with a left or right icon and have only 4px L/R padding. In narrow contexts where a user could take multiple actions, auxiliary buttons provide button functionality without a heavy footprint.
Example uses for Auxiliary buttons
Auxiliary Buttons used in Seller Tools concept, and Search Results filters.
Floating Action Buttons
Floating Action Buttons allow a user to initiate an action related to the displayed content. They are contained buttons which are anchored in place above the content using the z-axis.
Floating action buttons can initiate an action or display a menu of actions to the user.
A contained button may be modified to create a floating action button. The floating action button can overlay content and is locked to a specific position in the lower right of the screen.
A floating action button can be used to scroll the user to the top of a screen. In this case, the button is hidden until the user has scrolled down 2x the height of the window.
When a single button is needed, use a contained button.
Two Buttons with Hierarchy
Two Buttons without Hierarchy
When two or more buttons without hierarchy are needed, they may be outlined buttons or text buttons, but cannot be contained buttons.
Buttons can be optionally anchored to the bottom of the screen on a semi-transparent action bar.
The text button can be optionally floated to the left.
When stacking buttons, the higher priority button (if any) goes on top.
Text Icon buttons may be modified to create a mobile menu bar. Small text labels are optional if needed.