Elements
Buttons
Basics
All buttons have bold, ALL-CAPS labels and specified minimum left and right padding.
Hierarchy
Contained buttons have a background color to provide the most emphasis. Outline buttons have no background color, and thus have less emphasis. Text buttons have no background and no outline, and thus have the least emphasis.
With Icons
Buttons may have an optional left or right icon. Never use two icons.
States
Contained Button States
Outline Button States
Outline Button States (Light)
Text Button States
Text Button States (Light)
SCSS
Use these modifiers with .css-className
Color
| Class | Property |
|---|---|
| .btn-primary | Applies primary button styles |
| .btn-secondary | Applies secondary button styles |
| .btn-danger | Applies primary button styles |
| .btn-success | Applies secondary button styles |
| .btn-simulcast | Applies simulcast button styles |
Size
| Class | Property |
|---|---|
| .btn-sm | Applies small button styles |
Type
| Class | Property |
|---|---|
| .btn-outline | Outlined Button |
| .btn-textonly | Text-Only Button |
| .btn-icon-only | Icon-Only Button |
| .disabled, :disabled | Disabled Styles |
| .btn.dropdown-toggle | Dropdown Button |
| .btn-floating | Floating Button |
| .btn-pagination | Pagination Button |