Required files
SCSS files required: _components.buttons.scss
CTA buttons
Use the class .btn on any element eg. button, anchor, div, span.
Add the modifying classes to apply the secondary, tertiary and danger (delete) button styles .btn--secondary, .btn--tertiary, .btn--danger.
Control buttons
Use the class .btn and the modifying class .btn--control on any element eg. button, anchor, div, span.
Add the modifying classes to apply the secondary and danger (delete) button styles .btn--secondary, .btn--danger.
Passive buttons
Use the class .btn as well as the modifying class .btn--passive.
There is an option to add an svg icon embed inside the button. See the icons example page for more info on inline icons.
Disabled buttons
Add the disabled attribute to any button OR the class .is-disabled is available to add if required eg. if it is an anchor or span element.
The below examples use either the attribute or the class to show the styling looks the same for either.
Button group
The buttons have no spacing around them by default. However to stack buttons together nicely inline (as the examples) add a wrapper with the class .btn-group.