Skip to main contenteBay Playbook

Button

Buttons help direct and capture user action and intent.

Types

Choosing a button

Each button type serves a specific purpose. Choose a button type according to the screen’s context to maintain a clear and effective experience.

Hierarchy

Button hierarchy is essential to visually emphasize the most important actions through size, color, and placement. This prioritization aids users in navigating intuitively and efficiently. Only a single primary action should be used on a page.

Placement

Button placement depends on the space available, the number of buttons present, and the context of the buttons.

Listing page with a single primary button pinned to the bottom of the screen. The button title says "List it" and exemplifies a single primary button.

Single primary

Use a single primary button for the most important action on the page.

Two buttons on a page stacked on top of each other. The top button title is "Seller's other items" and the bottom button title is "Contact seller". The image exemplifies using a vertical button stack.

Vertical stack

Use a vertical button stack when the space is narrow and the buttons have titles.

A page with previous purchased items. One item has a horizontal button stack below it. The button stack has a primary CTA button and an overflow icon button.

Overflow

An overflow icon button can be placed inline next to a CTA button when there are two or more related, but low-priority actions.

Horizontal button stack in the footer of a modal dialog. The primary CTA button is pinned to the trailing edge of the footer container with the title "Submit". The other button has the title "Cancel".

Horizontal stack

Use a horizontal stack when there is enough room. This is common in dialogs and cards. The highest emphasis button is aligned to the trailing edge of the container in a horizontal stack.