Buttons
Buttons
Buttons
Buttons
Foundations
Colors
Iconography
Grid + Spacing
Responsive
Shadows
Typography
Layout
Modals
Modals / Confirmation
Panels
Tabs
Actions & Inputs
Buttons
Checkboxes
Dropdowns
Forms
Links
Radio Buttons
Selects
Text Fields
Status & Feedback
Badges
Progress Indicators
Tooltips
Foundations
Colors
Iconography
Grid + Spacing
Responsive
Shadows
Typography
Layout
Modals
Modals / Confirmation
Panels
Tabs
Actions & Inputs
Buttons
Checkboxes
Dropdowns
Form Fields
Links
Radio Buttons
Status & Feedback
Badges
Progress Indicators
Tooltips
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
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
Notes + Specifications
Notes + Specifications
–————
Style
Height: 36px
Corner radius: 4px
Label: Source Sans Pro, Regular, 16px
Left & right padding(without icon): 16px
