Branded button

v3.1

Branded buttons tie eBay’s CTA to our marketing palette.

CSS
Marko
React

Considerations

Use sparingly

Branded buttons provide an extended palette for greater expression, but overuse can affect their prominence over time. Use branded buttons sparingly.

Theming

Branded buttons help maintain a cohesive theme to marketing placements using the broader marketing color palette.

Standard placement

Branded buttons are always paired with a marketing statement within a banner or card. They don’t appear alone and are rarely used in button groups.

Anatomy

Title
Container

Properties

Title

Titles are short and sweet with a max character count of 20. Keep the title related to what the action will do.

Color

Branded buttons inherit the expressive theme of their parent container. Learn more about using color within banners on the Banner component page and in Using color in marketing.

Behavior

Width

In contrast to CTA buttons, branded buttons always hug their content. They don’t fill the width of their parent container.

Minimum width

The minimum width for basic and destructive buttons is 2x the height of the button.

Maximum width

The maximum width for buttons is 10x the height of the button. While a wide button is possible, it is also rare. Expect to keep the button width to the size of it’s contents since there should be no more than 20 characters within.

Height

Branded buttons use the medium button size across branded contexts.

Text overflow

Titles that extend beyond the width of the button container will wrap to a new line to ensure the title remains visible for all languages.

State

Buttons use state layers for states. The available states are enabled, hover, pressed, and focused. The focused state outline should match the button’s color theme. Learn more about the state layer color values in Color tokens.