Jump To:

  1. Sizes
  2. Active State
  3. With Icon
  4. Icon Only
  5. Other Preset Styles
  6. Testing of Buttons with common icons and common component use cases

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.

Default Button Active Button

With Icon

Icon Before Icon After

Icon 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

Examples of Icons and Icon Button Styles
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