Buttons

Barebones includes a small button component with a default style and a few common modifiers. Button styles are intentionally minimal so each project can adapt them to its visual design.

Base button

Use .btn on links, buttons, or submit controls. The default button uses the theme brand colour for the background and the background colour for the text.

<a href="#" class="btn">Read more</a>

<button class="btn" type="button">
    Submit
</button>

Inverse button

Use .btn--inverse for an outlined inverse style. This swaps the default colours and adds a brand-coloured border.

<a href="#" class="btn btn--inverse">
    Secondary action
</a>

Block button

Use .btn--block for a ful-width button using display: block. Adjacent block buttons receive a small top margin.

<a href="#" class="btn btn--block">
    Full-width button
</a>

<a href="#" class="btn btn--block">First action</a>
<a href="#" class="btn btn--block">Second action</a>

Link button

Use .btn--link for a lower-emphasis action that should look closer to a text link.

<button class="btn btn--link" type="button">
    Cancel
</button>

Disabled state

Buttons support the native disabled attribute and an .is-disabled class.

<button class="btn" type="button" disabled>
    Disabled button
</button>

<a href="#" class="btn is-disabled">
    Disabled link
</a>