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