Clickable elements used to perform actions.
Buttons change width depending on the content inside of them and have three variations: Primary, Secondary 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. Secondary buttons should mostly be used in the Small size, and Tertiary may not be used at the Large size.
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
Buttons and links can be combined with other elements like inputs, icons, and other links to create unique components.
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.
Multiple related actions can be grouped in a row with default horizontal spacing.