Buttons
Normal buttons
| Button | Class="" | Description | 
|---|---|---|
|  | Only button tag | |
|  | Standard button | |
|  | Provides extra visual weight and identifies the primary action in a set of buttons | |
|  | Indicates a successful or positive action | |
|  | Contextual button for informational alert messages | |
|  | Indicates caution should be taken with this action | |
|  | Indicates a dangerous or potentially negative action | |
|  | Brown button | |
|  | Dark button | |
|  | Yellow button | |
|  | Purple button | |
|  | Pink button | |
|  | Lime button | |
|  | Magenta button | |
|  | Deemphasize a button by making it look like a link while maintaining button behavior | 
Extra small buttons
| Button | Class="" | Description | 
|---|---|---|
|  | Only button tag | |
|  | Standard button | |
|  | Provides extra visual weight and identifies the primary action in a set of buttons | |
|  | Indicates a successful or positive action | |
|  | Contextual button for informational alert messages | |
|  | Indicates caution should be taken with this action | |
|  | Indicates a dangerous or potentially negative action | |
|  | Brown button | |
|  | Dark button | |
|  | Yellow button | |
|  | Purple button | |
|  | Pink button | |
|  | Lime button | |
|  | Magenta button | |
|  | Deemphasize a button by making it look like a link while maintaining button behavior | 
Large buttons
| Button | Class="" | Description | 
|---|---|---|
|  | Only button tag | |
|  | Standard button | |
|  | Provides extra visual weight and identifies the primary action in a set of buttons | |
|  | Indicates a successful or positive action | |
|  | Contextual button for informational alert messages | |
|  | Indicates caution should be taken with this action | |
|  | Indicates a dangerous or potentially negative action | |
|  | Brown button | |
|  | Dark button | |
|  | Yellow button | |
|  | Purple button | |
|  | Pink button | |
|  | Lime button | |
|  | Magenta button | |
|  | Deemphasize a button by making it look like a link while maintaining button behavior | 
Small buttons
| Button | Class="" | Description | 
|---|---|---|
|  | Only button tag | |
|  | Standard button | |
|  | Provides extra visual weight and identifies the primary action in a set of buttons | |
|  | Indicates a successful or positive action | |
|  | Contextual button for informational alert messages | |
|  | Indicates caution should be taken with this action | |
|  | Indicates a dangerous or potentially negative action | |
|  | Brown button | |
|  | Dark button | |
|  | Yellow button | |
|  | Purple button | |
|  | Pink button | |
|  | Lime button | |
|  | Magenta button | |
|  | Deemphasize a button by making it look like a link while maintaining button behavior | 
Disabled buttons
| Button | Attribute | Description | 
|---|---|---|
|  | Only button tag | |
|  | Standard button | |
|  | Provides extra visual weight and identifies the primary action in a set of buttons | |
|  | Indicates a successful or positive action | |
|  | Contextual button for informational alert messages | |
|  | Indicates caution should be taken with this action | |
|  | Indicates a dangerous or potentially negative action | |
|  | Brown button | |
|  | Dark button | |
|  | Yellow button | |
|  | Purple button | |
|  | Pink button | |
|  | Lime button | |
|  | Magenta button | |
|  | Deemphasize a button by making it look like a link while maintaining button behavior | 
With icons
| Button | Class="" | Description | 
|---|---|---|
|  | Only button tag | |
|  | Standard button | |
|  | Provides extra visual weight and identifies the primary action in a set of buttons | |
|  | Indicates a successful or positive action | |
|  | Contextual button for informational alert messages | |
|  | Indicates caution should be taken with this action | |
|  | Indicates a dangerous or potentially negative action | |
|  | Brown button | |
|  | Dark button | |
|  | Yellow button | |
|  | Purple button | |
|  | Pink button | |
|  | Lime button | |
|  | Magenta button | |
|  | Deemphasize a button by making it look like a link while maintaining button behavior | 
Alternative style
| Button | Class="" | Description | 
|---|---|---|
|  | Provides extra visual weight and identifies the primary action in a set of buttons | |
|  | Indicates a successful or positive action | |
|  | Contextual button for informational alert messages | |
|  | Indicates caution should be taken with this action | |
|  | Indicates a dangerous or potentially negative action | |
|  | Brown button | |
|  | Dark button | |
|  | Yellow button | |
|  | Purple button | |
|  | Pink button | |
|  | Lime button | |
|  | Magenta button | 
 Chad Engle
Chad Engle
                                                 Anthony Lagoon
Anthony Lagoon Kory Handy
Kory Handy Divia Manyan
Divia Manyan Eric Hofman
Eric Hofman Mike Beecham
Mike Beecham Darek Bradly
Darek Bradly Lauren Grey
Lauren Grey Frankie Freesibie
Frankie Freesibie Joane Fornier
Joane Fornier Alia Alien
Alia Alien