Skip to main contenteBay Playbook

Button

Buttons help direct and capture user action and intent.

Types

Different button types available. The number one points to a CTA button. The number 2 points to a branded button. The number 3 points to an icon button. The number 4 points to a link button.
  1. CTA Button
  2. Icon button
  3. Link button

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.

CTA

A button that triggers the primary action in a flow. Use when there is one clear, high-priority action to complete. Learn more about using CTA buttons.

Primary CTA button with the title "Create listing"

Icon

A button that triggers an action using only an icon. Best for familiar, universal actions where the meaning is clear without a label. Learn more about using Icon buttons.

An icon button with a heart icon.

Link

A button that triggers actions that keep users on the current page, like expanding content or clearing a form. Learn more about using Link buttons.

Don’t confuse link buttons for standard text links. Buttons take action, links navigate. Learn more about Text links.

Link button with the title "Read more".

Hierarchy

Use button hierarchy to communicate the relative importance of actions. Limit each page to one primary action to maintain clarity and focus.

Four CTA button variants each with a different level. The top button is primary, the second button is secondary, the third button is tertiary, and the fourth button is borderless.

Placement

Where you place buttons affects how easily users find and complete actions. Consider available space, the number of buttons, and the surrounding content.

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 stack when space is narrow and buttons have titles. Place the primary button at the top.

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.

Horizontal stack

Use a horizontal stack when there's enough room for buttons to sit side by side.

Alignment

Align buttons based on their context.

In containers

Align buttons to the trailing edge in dialogs and sheets. The primary button goes closest to the edge.

A review offer dialog showing secondary and primary buttons in the footer, aligned to the end. Primay goes closets to the edge.

On page

On small screens, make buttons full width and stack them vertically.

On large screens, align buttons to the leading edge with the primary button first. This keeps actions close to the content people read or fill out.

Pinned

On small screens, pin the primary button to the bottom of the screen when it completes the main task, like listing an item. Don’t pin more than two buttons.