Buttons

All buttons start off with a base class of .button, and then get applied the additional classes below to set the size and style of the button.

Button Size

Apply either the .button-sm or .button-lg class to modify the size of the button.

Small Standard Large

Button Color

Apply either the .button-primary or .button-secondary class to modify the color of the button.

Default Primary Secondary

Border Button

For any of the button colors, you can add -border to the end of the button color class to make it a border-style button.

Default Border Primary Border Secondary Border

Link Button

For any of the button colors, you can add -link to the end of the button color class to make it a link-style button. This is useful when placing two buttons next to each other, with this style being used for the less important action of the two.

Primary Button Link Button

Disabled Button

Add the .button-disabled class to make the button visually look unusable. Buttons that are disabled should also have a tooltip to let users know why they can't interact with the button. To do this, you can add the .tooltip class, and then utilize the title attribute to set the description.