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 with .button-primary to create a solid button, used to represent primary actions.
<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><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>Button variants also exist for secondary and tertiary colors defined in theme settings, which you can apply using .button-secondary and .button-tertiary, respectively.
<a class="button button-primary" href="#" role="button">Primary</a>
<a class="button button-secondary" href="#" role="button">Secondary</a>
<a class="button button-tertiary" href="#" role="button">Tertiary</a>Outline buttons
Use .button-outline with .button to create an outline button, used to represent secondary actions.
<a class="button button-outline" href="#" role="button">Link</a>
<input class="button button-outline" type="button" value="Input">
<input class="button button-outline" type="submit" value="Submit">
<input class="button button-outline" type="reset" value="Reset">
<button class="button button-outline" type="submit">Button</button>Use .button-outline-primary to create an outline button with the theme’s primary color applied.
<a class="button button-outline-primary" href="#" role="button">Primary</a>
<a class="button button-outline-secondary" href="#" role="button">Secondary</a>
<a class="button button-outline-tertiary" href="#" role="button">Tertiary</a>Link buttons
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.
<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 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 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 is-active" role="button" aria-pressed="true">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.
<button type="button" class="button button-primary" disabled>Primary button</button>
<button type="button" class="button button-outline" disabled>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 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 provided as part of our framework 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.