Pattern Library
Buttons
On this page:
Primary Button
Primary button is created by adding class btn to the <a> tag. By default, class btn applies styling from class btn--primary, so adding class btn--primary is optional.
The primary button can be modified by adding variation classes to class btn.
Button Type 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)