Skip to main contenteBay Playbook

Button

Buttons help direct and capture user action and intent.

  • Skin
  • CoreUI
  • React

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. Branded button
  3. Icon button
  4. 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 designed to grab the user's attention and prompt an immediate response. Learn more about using CTA buttons.

Primary CTA button with the title "Create listing"

Branded

An expressive button used in branded marketing placements to call attention using a broader color range. Learn more about using Branded buttons.

Branded button with the title "Shop now".

Icon

A button that uses an icon instead of text to convey its action, often used for common tasks like search, settings, or creating a new item. Learn more about using Icon buttons.

An icon button with a heart icon.

Link

A button styled to look like a hyperlink, used when the action involves navigation to another page. Learn more about using Link buttons.

Link button with the title "Read more".

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.

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

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.

Change log

DateNotes
Jun, 2024
  • Created with eBay Evo