Clickable elements used to perform actions.


Buttons change width depending on the content inside of them and have four variations: Primary, Secondary, Tertiary and Caution.


These buttons may only be used on top of a “Base Color” such as blue or indigo or on top of a photo.


There are two button sizes, Large and Small. Almost always, the Large size should be used. Tertiary buttons should mostly be used in the Small size, and Tertiary may not be used at the Large size.

Text padding
Top & Bottom = 14px
Left & Right = 24px
Text padding
Top & Bottom = 14px
Left & Right = 24px

Full width

Most commonly used for mobile, full width buttons may only use the Primary & Tertiary styles. They can’t be in a container over 480px wide and can’t be smaller than 300px. They also should only be used on white backgrounds. Padding is set to 24px around the button


Buttons and links can be combined with other elements like inputs, icons, and other links to create unique components.

With icons

Buttons may contain icons but should only appear on the left side of copy.


Buttons support loading states without changing the width of the button and only available in the primary style.


Used when an action is not yet possible.

Button row

Multiple related actions can be grouped in a row with default horizontal spacing.


  • Buttons should be sentence case with exceptions for proper nouns
  • Buttons should be limited to 3 words where possible
Was this page helpful?

We use this feedback to improve the quality of our documentation.