Styling Fast Buttons

Button Style Variants

In order to keep Fast buttons looking and feeling like "Fast", we need to be consistent about how our buttons look. We have both size and style variants to choose from.

Official Fast Button Style Variants

We have 2 different size style variants for how our official Fast buttons should look. One for "light mode" and the other for "dark mode".

Light Mode

Use these colors if the button will sit on a light background color.

Dark Mode

Use these colors if the button will sit on a dark background color.

Official Fast Button Size Styles

heads up

All buttons can be either 100% width of their parent container or just respect their x axis padding. The minimum width for our button is 150px. See the "Sample Parent Container Code" section below for code that can help.

We have 3 different size style variants for how our official Fast buttons should look.

They are:

  1. Compact
  2. Default
  3. Large

Compact Button Styles

Default Button Styles

Large Button Styles

Sample Fast Button Parent Container Code

This code will make sure that the minimum size of the Fast button is 150px.

Copy
Copied to Clipboard
<div style="display:inline-block; min-width:150px">
  <fast-checkout-button></fast-checkout-button>
</div>