Buttons
All buttons MUST include role="button" as an attribute, regardless of element type.Standard button
Eveniet id enim est laborum<!-- Normal button start -->
<a href="../nojs.html" class="button" role="button">Debitis vel sit eum ea</a>
<!-- Normal button end -->
Standard button class, can be applied to any element, including button and input.
CTA button
Aperiam ut<!-- Call to action button start -->
<a href="#" class="button button--cta" role="button">Fuga nobis</a>
<!-- Call to action button end -->
Modifier class, generally used in blocks of prose, must be combined with the base button class.
Inline button
A porro cupiditate voluptates laudantium<!-- Inline button start -->
<a href="#" class="button button--inline" role="button">Tenetur rerum expedita debitis ut</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
Voluptatibus illo et voluptates animi<!-- Neutral button start -->
<a href="#" class="button button--neutral" role="button">Laudantium tempora vitae sit sapiente</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
Sint asperiores animi aliquam sed<!-- Icon button start -->
<a href="#" class="button icon-inline--right icon--filter-light" role="button">Quod laboriosam officiis in tempora</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.