Buttons
Boosted includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
On this page
Sizes
Small
Medium
Large
Styles
| web-btn-sol-001 | web-btn-sfl-001 | web-btn-imp-001 | web-btn-pos-001 | web-btn-neg-001 | |
|---|---|---|---|---|---|
| Default | |||||
| Pressed | |||||
| Disabled |
With icon
| web-btn-sol-002 | web-btn-sfl-002 | web-btn-imp-002 | web-btn-pos-002 | web-btn-neg-002 | |
|---|---|---|---|---|---|
| Default | |||||
| Pressed | |||||
| Disabled |
Icon buttons
Icon button — web-btn-ico-001
Default
Pressed
Disabled
Icon button outlined — web-btn-ico-002
Default
Pressed
Disabled
Toggle Buttons
| With labels web-btn-tog-001 |
With icons web-btn-tog-002 |
With icons, no outline web-btn-tog-003 |
|
|---|---|---|---|
| Selected |
|
|
|
| Disabled |
|
|
|
Split buttons
Documentation — web-btn-spt-001
Default
Active
Disabled
Pagination
With labels
With icons
Back to top
Documentation — web-btn-btt-001