Basic Button Styles

Root class: o-btn
Span Class: o-btn__icon
Root Class: o-btn o-btn--expanding-arrow

Use only with the cta-expanding-arrow icon.

Root Class: o-btn o-btn--expanding-arrow

Use only with the cta-expanding-arrow icon.

Button Color Theme Styles

These classes rely on color theme css variables.

Class: o-btn o-btn--text-dark
Class: o-btn o-btn--primary

This takes on the dark color of the current color theme.

Class: o-btn o-btn--primary-light

This takes on the light color of the current color theme.

Class: o-btn o-btn--primary-inverse

Use for button on dark theme background.

Span Class: o-btn__icon
Span Class: o-btn__icon-left

Color Theme Buttons

These classes use specific color theme styles, rather than relying on the color theme css variables.

Root Class: o-btn o-btn--primary--ocean
Root Class: o-btn o-btn--primary--reef
Root Class: o-btn o-btn--primary--teal
Root Class: o-btn o-btn--primary--plum
Root Class: o-btn o-btn--primary--navy
Root Class: o-btn o-btn--primary--charcoal

Icon Button Styles

Class: o-btn--round
Class: o-btn--round o-btn--round--fill
Class: o-btn--round o-btn--round--hover-grow
Class: o-btn--round o-btn--round--fill o-btn--round--hover-grow