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 |