1.1 atoms.buttons Buttons

Toggle example guides Toggle HTML markup

A majority of buttons in the site are built from the same base class.

Examples
Default styling
Link Button
.btn
Use this class to indicate that the button is the primary feature of this form.
Link Button
.btn-primary
Provides extra visual weight and identifies the primary action in a set of buttons.
Link Button
.btn-secondary
Secondary, outline button.
Link Button
.btn-success
Indicates a successful or positive action.
Link Button
.btn-info
Contextual button for informational alert messages.
Link Button
.btn-warning
Indicates caution should be taken with this action.
Link Button
.btn-danger
Indicates a dangerous or potentially negative action.
Link Button
.btn-link
Deemphasize a button by making it look like a link while maintaining button behavior.
Link Button
.hover
Highlight the button when hovered.
Link Button
.disabled
Make the button change appearance to reflect it being disabled.
Link Button
.active
"Press" the button down when clicked.
Link Button
Markup: components/atoms/buttons/buttons.twig
<a href="#" class="btn [modifier class]">Link Button</a>
<button class="btn [modifier class]">Button element</button>
<input class="btn [modifier class]" type="button" value="input type button"></input>
Source: components/atoms/buttons/_buttons.scss, line 1