Button

Buttons are a simple component that allow users to take actions.

button

Button
<a href="#" class="button">Button</a>
<button class="button">Button</button>

button__item

Elements inside the button component receive appropriate spacing using the > * + * selector rule. You can also use the .button__item element for more specificity.

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

button_icon

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

button_size

<button class="button button_size_sm button_color_primary">...</button>
<button class="button button_color_primary">...</button>
<button class="button button_size_lg button_color_primary">...</button>

button_block

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

button_block_[key]

<button class="button button_block_xs">...</button>
<button class="button button_block_sm">...</button>
<button class="button button_block_md">...</button>
<button class="button button_block_lg">...</button>
<button class="button button_block_xl">...</button>

button_color_[key]

<!-- Colors -->
<button class="button button_color_primary">...</button>
<button class="button button_color_secondary">...</button>
<button class="button button_color_accent">...</button>
<button class="button button_color_shade">...</button>
<button class="button button_color_dark">...</button>

<!-- Utility -->
<button class="button button_color">...</button>
<button class="button button_color_subtle">...</button>
<button class="button button_color_invert">...</button>
<button class="button button_color_invert_subtle">...</button>

button_outline_[key]

<!-- Colors -->
<button class="button button_outline_primary">...</button>
<button class="button button_outline_secondary">...</button>
<button class="button button_outline_accent">...</button>
<button class="button button_outline_shade">...</button>
<button class="button button_outline_dark">...</button>

<!-- Utility -->
<button class="button button_outline">...</button>
<button class="button button_outline_subtle">...</button>
<button class="button button_outline_invert">...</button>
<button class="button button_outline_invert_subtle">...</button>