Sections

Buttons

Buttons are used to represent actions that a visitor can take on the page.

The .button classes are designed to be used with the <button> element, but can also be used with <a> and <input> elements. When using button classes on <a> elements that trigger in-page functionality, use the role="button" attribute to convey their purpose to assistive technologies such as screen readers.

Usage

Solid buttons

Use .button-primary with .button to create a solid button, used to represent primary actions.

Link
<a class="button button-primary" href="#" role="button">Link</a>
<input class="button button-primary" type="button" value="Input">
<input class="button button-primary" type="submit" value="Submit">
<input class="button button-primary" type="reset" value="Reset">
<button class="button button-primary" type="submit">Button</button>

Outline buttons

Use .button-outline-primary with .button to create an outline button, used to represent secondary actions.

Link
<a class="button button-outline-primary" href="#" role="button">Link</a>
<input class="button button-outline-primary" type="button" value="Input">
<input class="button button-outline-primary" type="submit" value="Submit">
<input class="button button-outline-primary" type="reset" value="Reset">
<button class="button button-outline-primary" type="submit">Button</button>

Use .button-link with .button to give buttons the appearance of links while aligning them with other buttons. These are typically used to represent less common actions.

Link
<a class="button button-link" href="#" role="button">Link</a>
<input class="button button-link" type="button" value="Input">
<input class="button button-link" type="submit" value="Submit">
<input class="button button-link" type="reset" value="Reset">
<button class="button button-link" type="submit">Button</button>

Sizes

Use .button-lg to make a button larger and more prominent.

<button type="button" class="button button-primary button-lg">Large button</button>
<button type="button" class="button button-outline-primary button-lg">Large button</button>

Use .button-sm to make a button smaller.

<button type="button" class="button button-primary button-sm">Small button</button>
<button type="button" class="button button-outline-primary button-sm">Small button</button>

States

Active

Use .is-active to apply the styles associated with a button’s active state.

<a href="#" class="button button-primary is-active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="button button-outline-primary is-active" role="button" aria-pressed="true">Link</a>

Disabled

Buttons will look inactive when the disabled boolean attribute is present on a button.

Link Link
<button type="button" class="button button-primary" disabled>Primary button</button>
<button type="button" class="button button-outline-primary" disabled>Button</button>
<a class="button button-primary is-disabled" href="#" role="button" tabindex="-1" aria-disabled="true">Link</a>
<a class="button button-outline-primary is-disabled" href="#" role="button" tabindex="-1" aria-disabled="true">Link</a>

Disabled buttons using the <a> element must add the .is-disabled class and the aria-disabled="true" attribute should be added to communicate the state of the element to assistive technologies. The tabindex="-1" attribute will prevent them from receiving keyboard focus.

Variants

Use the solid-button and outline-button Sass mixins to create different colored buttons.

// A red solid button
.button-red {
  @include solid-button(#f01);
}

// A red outline button
.button-outline-red {
  @include outline-button(#f01);
}

You can use any color, not just those in the predefined theme color palette.