Primary Button

Primary button is created by adding the .btn class to the <a> tag. By default, .btn applies styling from .btn--primary, so adding .btn--primary is optional.

Button Modifiers

The primary button can be modified by adding additional classes to .btn.

Button Variations

Size Variations

Border Variations

Width Variations

Button width is dependent on parent div's width.

  • Wide takes up 100% of the parent div's width.
  • Half takes up 50% of the parent div's width.
  • Third takes up 33.3% of the parent div's width.

Directional Variations

Button with Icon Variations

Icons are placed on the left side of button. Exception: An icon can be placed on the right side if the button has a left chevron arrow on the left side.

Class descriptions

.btn--icon: aligns text to left

.btn--icon-left, .btn--icon-right: required if adding chevron arrows

.icon--heavy: icon class that puts the icon in a blue circle (outline buttons only)

Messaging Variations


  • Success - default: #659f13, hover: #48710e
  • Warning - default: #e28327, hover: #bd6a19
  • Error - default: #c51313, hover: #960f0f