Buttons UI
Button | class="" | Description |
---|---|---|
btn btn-default
|
Standard gray button with gradient | |
btn btn-primary
|
Provides extra visual weight and identifies the primary action in a set of buttons | |
btn btn-info
|
Used as an alternative to the default styles | |
btn btn-success
|
Indicates a successful or positive action | |
btn btn-warning
|
Indicates caution should be taken with this action | |
btn btn-danger
|
Indicates a dangerous or potentially negative action | |
btn btn-link
|
Deemphasize a button by making it look like a link while maintaining button behavior |
Button | class="" | Description |
---|---|---|
btn btn-default btn-round
|
Standard gray button with gradient | |
btn btn-primary btn-round
|
Provides extra visual weight and identifies the primary action in a set of buttons | |
btn btn-info btn-round
|
Used as an alternative to the default styles | |
btn btn-success btn-round
|
Indicates a successful or positive action | |
btn btn-warning btn-round
|
Indicates caution should be taken with this action | |
btn btn-danger btn-round
|
Indicates a dangerous or potentially negative action | |
btn btn-link btn-round
|
Deemphasize a button by making it look like a link while maintaining button behavior |
Button | class="" | Description |
---|---|---|
btn btn-outline-default
|
Standard gray button with gradient | |
btn btn-outline-primary
|
Provides extra visual weight and identifies the primary action in a set of buttons | |
btn btn-outline-info
|
Used as an alternative to the default styles | |
btn btn-outline-success
|
Indicates a successful or positive action | |
btn btn-outline-warning
|
Indicates caution should be taken with this action | |
btn btn-outline-danger
|
Indicates a dangerous or potentially negative action |
Disabled State
.btn .btn-primary .disabled
.btn .btn-default .disabled
.btn .btn-success .disabled
.btn .btn-danger .disabled
.btn .btn-warning .disabled
.btn .btn-info .disabled
.btn .btn-light .disabled
.btn .btn-dark .disabled
.btn .btn-link .disabled