Button

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

npm version

Source Code

npm install @vrembem/button
@use "@vrembem/button";

button

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

button disabled

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

button > [elements]

Elements inside the button component receive appropriate spacing using the > * + * selector rule.

<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_[key]

<button class="button button_size_sm">...</button>
<button class="button">...</button>
<button class="button button_size_lg">...</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">Default</button>
<button class="button button_color_subtle">Color Subtle</button>
<button class="button button_color_primary">Color Primary</button>
<button class="button button_color_secondary">Color Secondary</button>

<!-- Invert -->
<button class="button button_invert">Default Invert</button>
<button class="button button_invert button_color_subtle">Color Subtle Invert</button>
<button class="button button_color_primary">Color Primary</button>
<button class="button button_color_secondary">Color Secondary</button>

button_outline_[key]

<!-- Colors -->
<button class="button button_outline">Default Outline</button>
<button class="button button_outline_primary">Outline Primary</button>
<button class="button button_outline_secondary">Outline Secondary</button>

<!-- Invert -->
<button class="button button_invert button_outline">Default Outline Invert</button>
<button class="button button_invert button_outline_primary">Outline Primary</button>
<button class="button button_invert button_outline_secondary">Outline Secondary Invert</button>

button is-loading

<a href="#" class="button is-loading">Button</a>
<button class="button is-loading">Button</button>