Button
Sizes
Sizes can be configured this just shows the default sizes
Small Button Default Button Large Button
Active State
Adding the is-active class to enable active state.
With Icon
Icon Before Icon After Icon Before/AfterIcon Only
Other Preset Styles
These can be configured, so these are just the defaults
Transparent Button Outline Button
Testing of Buttons with common icons and common component use cases
| Type | Example |
|---|---|
| Modal Close Button | |
| X on standard button--icon | |
| Search Hourglass | |
| Theme Moon and Sun | |
| Settings Cog in 3 sizes | |
| Search Hourglass with Text | Search |
| Download Icon with Text | Download |
| Settings Cog with Text | Settings |