Buttons are calls to action used throughout the product experience.

Overview 

Buttons provide a visual indication that users can take a specified action.

Buttons should be clear and direct.

Keep button labels short and concise.

Button labels must remain on one line.
 

USE CASES:

A primary button is used to “Create a New Product”.

A secondary button is used in conjunction with a primary button. 

A subtle button is used to “Cancel” in conjunction with other actions.

Anatomy

Button

1. Container
The container houses the content of the button.

2. Label
Single line of text describing the action.

3. Icon (optional)
Buttons have the option of including an icon 
to the left of the label.

 

 

Hierarchy & Types

buttons
Buttons

Notes + Specifications


View Developer Docs

Notes + Specifications


View Developer Docs

–————
Style
 
Height: 36px

Corner radius: 4px
Label: Source Sans Pro, Regular, 16px
Left & right padding(without icon): 16px
 

HeroLogo
 
© Copyright 2019 BigCommerce
 
 
© Copyright 2019 BigCommerce
Feedback or suggestions to help us improve BigDesign?  Contact Us