Buttons

All buttons MUST include role="button" as an attribute, regardless of element type.

Standard button

Delectus ut assumenda vel modi
<!-- Normal button start -->
<a href="../nojs.html" class="button" role="button">Similique deleniti exercitationem consequuntur optio</a>
<!-- Normal button end -->

Standard button class, can be applied to any element, including button and input.

CTA button

Autem repudiandae
<!-- Call to action button start -->
<a href="#" class="button button--cta" role="button">Molestiae veniam</a>
<!-- Call to action button end -->

Modifier class, generally used in blocks of prose, must be combined with the base button class.

Inline button

Aut optio est harum voluptas
<!-- Inline button start -->
<a href="#" class="button button--inline" role="button">Non eos quibusdam pariatur exercitationem</a>
<!-- Inline button end -->

Modifier class, generally used inline with text or where space is an issue, must be combined with the base button class.

Neutral button

Magnam placeat beatae cumque quibusdam
<!-- Neutral button start -->
<a href="#" class="button button--neutral" role="button">Et ipsam laboriosam labore voluptatem</a>
<!-- Neutral button end -->

Modifier class, used in cases where buttons should not be dominant or are of secondary purpose, must be combined with the base button class.

Icon button

Ipsam dolor dolorem soluta eius
<!-- Icon button start -->
<a href="#" class="button icon-inline--right icon--filter-light" role="button">Consequatur iusto reprehenderit eos deleniti</a>
<!-- Icon button end -->

Can be used in combination with other modifier classes in order to create buttons with icons. The -light and -dark prefixes define the colour of the icons. Available icons can be found in _icons.scss.