Button

button

The most basic implementation of the button component consists of the button class that can be applied to <button>, <a role="button"> or <input> elements with a type attribute of “button”, “submit” or “reset”. Remember to add role="button" to any none semantic buttons as needed.

<button class="button">Button</button>
<a class="button" role="button">Anchor</a>
<input class="button" type="button" value="Input">
<input class="button" type="submit" value="Submit">
<input class="button" type="reset" value="Reset">

Elements within a button are centered vertically and spaced accordingly using the value set in $gap (defaults to 0.5em). When elements are added inside a button, the button’s text should also be wrapped in a <span> so that it can be spaced properly.

<button class="button">
  <svg role="img" class="icon">
    <use xlink:href="#anchor"></use>
  </svg>
  <span>Button</span>
  <span class="arrow"></span>
</button>

Disabled

When disabled using the disabled attribute, a button will inherit styles to visually appear noninteractive.

<button class="button" disabled>Button</button>

Loading

Buttons can also have a loading state by adding the is-loading state class. This is useful when a button has an action that has a delayed response in order to give users a visual indicator that their action is being processed.

<button class="button is-loading" disabled>Button</button>

Warning: the is-loading state class will not work on <input type="button"> buttons since it uses the ::after pseudo-element to display the loading spinner.

button_block_[key]

Gives a button “block” styles so that it spans the full width of its container. Values and class keys are generated using the $breakpoints map. Omitting the key value from the modifier (e.g. button_block) will apply block styles under all conditions.

<button class="button button_block">...</button>

Available Variations

• button_block
• button_block_xs
• button_block_sm
• button_block_md
• button_block_lg
• button_block_xl

button_color_[value]

Adds styles for changing the look and feel of a button. These are usually done with different background and text colors.

<button class="button button_color_primary">Button</button>
<button class="button button_color_secondary">Button</button>

Available Variations

• button_color_primary
• button_color_secondary

button_icon

Adds styles that make icon-only buttons more balanced and will appear square if the icon used also has equal width and height.

<button class="button button_icon">
  <svg role="img" class="icon">
    <use xlink:href="#anchor"></use>
  </svg>
</button>

button_invert

A boolean button modifier that allows buttons and their modifiers to provide an inversed version of themselves. Since not all button styles require an inversed variant, this is typically used for when the background context of a button matters. Can be combined with button_subtle boolean modifier.

<button class="button button_invert">Default Invert</button>
<button class="button button_invert button_subtle">Invert Subtle</button>

Available Combinations

• button button_invert
• button button_invert button_subtle

button_size_[value]

Adjust the size of a button by increasing or decreasing its padding and font-size. By default, the button scale will provide a button height of 30px (small button_size_sm), 40px (default) and 50px (large button_size_lg).

<button class="button button_size_sm">Button</button>
<button class="button button_size_lg">Button</button>

Available Variations

• button_size_sm
• button_size_lg

button_state_[value]

Adds styles for changing the look and feel of a button to better reflect the urgency or status.

<button class="button button_state_info">Button</button>
<button class="button button_state_success">Button</button>
<button class="button button_state_caution">Button</button>
<button class="button button_state_danger">Button</button>

Available Variations

• button_state_info
• button_state_success
• button_state_caution
• button_state_danger

button_subtle

A boolean button modifier that allows buttons and their modifiers to provide a more subtle version of themselves. Can be combined with button_invert boolean modifier.

<button class="button button_subtle">Default Subtle</button>
<button class="button button_subtle button_invert">Subtle Invert</button>

Available Combinations

• button button_subtle
• button button_subtle button_invert

Sass Variables

$breakpoints

The breakpoints map the button_block_[key] modifier uses to build its styles.

// Inherited from: core.$breakpoints
$breakpoints: (
  "xs": 480px,
  "sm": 620px,
  "md": 760px,
  "lg": 990px,
  "xl": 1380px
) !default;