Components

Button(Usage)

Clickable elements used to perform actions.

Types

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

Solid

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

Sizes

There are two button sizes, Large and Small. Almost always, the Large size should be used. Secondary 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 & Secondary 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

Variations

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.

Loading

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

Disabled

Used when an action is not yet possible.

Button row

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

Copy

  • Buttons should be sentence case with exceptions for proper nouns
  • Buttons should be limited to 3 words where possible