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 |