Button

The most basic of UI components. Buttons represent an action that a user can take.

button

Button
<a class="button" href="#">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

Used for when displaying a button with only an icon and no text.

<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>
<button class="button button_color_primary">Button</button>
<button class="button button_size_lg button_color_primary">Button</button>

button_block

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

button_min-width

<button class="button button_min-width">Button</button>

button_color

...

button_outline

...