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
.btn
Use this class to indicate that the button is the primary feature of this form.
.btn-primary
Provides extra visual weight and identifies the primary action in a set of buttons.
.btn-secondary
Secondary, outline button.
.btn-success
Indicates a successful or positive action.
.btn-info
Contextual button for informational alert messages.
.btn-warning
Indicates caution should be taken with this action.
.btn-danger
Indicates a dangerous or potentially negative action.
.btn-link
Deemphasize a button by making it look like a link while maintaining button behavior.
.hover
Highlight the button when hovered.
.disabled
Make the button change appearance to reflect it being disabled.
.active
"Press" the button down when clicked.
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