Buttons

Definition

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.

Common Characteristics

All buttons have bold, ALL-CAPS labels.

All buttons have these states: disabled, active, hover/tap, and focused.

Size

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.

Hierarchy

Contained Buttons

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

Outlined buttons provide less emphasis. When two or more buttons without hierarchy are needed, use multiple outlined buttons, or multiple text buttons.

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.

Specialty Buttons

These buttons can be used in a UI in addition to the core button hierarchy.

Auxiliary Buttons

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

seller tools horizontal

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. checkbox horizontal

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.

checkbox horizontal

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.

Scenarios

Single Button

checkbox horizontal

When a single button is needed, use a contained button.

Two Buttons with Hierarchy

checkbox horizontal

Two Buttons without Hierarchy

checkbox horizontal checkbox horizontal

When two or more buttons without hierarchy are needed, they may be outlined buttons or text buttons, but cannot be contained buttons.

Anchored Buttons

checkbox horizontal

Buttons can be optionally anchored to the bottom of the screen on a semi-transparent action bar.

checkbox horizontal

The text button can be optionally floated to the left.

checkbox horizontal

When stacking buttons, the higher priority button (if any) goes on top.

Menu Bars

checkbox horizontal

Text Icon buttons may be modified to create a mobile menu bar. Small text labels are optional if needed.