Button base

The button base with modifiers that can be applied on all types of buttons. The .btn class can be used on button and a elements.

Modifiers

  • :disabled - Disabled button
  • .btn-sm - Small button
  • .btn-lg - Large button

Example

<button class="btn">Button base</button>
<button class="btn disabled">Button base</button>
Source file: ~/source/sass/component/button/button.scss
View source on GitHub

Button: Primary

Buttons

Modifiers

  • :disabled - Disabled button
  • .btn-sm - Small button
  • .btn-lg - Large button

Example

<button class="btn btn-primary">Primary button</button>
<button class="btn btn-primary disabled">Primary button</button>
Source file: ~/source/sass/component/button/button.scss
View source on GitHub

Button size

Buttons

Modifiers

  • .btn-sm - Small button
  • .btn-lg - Large button

Example

<button class="btn btn-sm">Small button</button>
<button class="btn">Default button</button>
<button class="btn btn-lg">Large button</button>
Source file: ~/source/sass/component/button/button.scss
View source on GitHub

Block button

Block button spans the full width of the container

Example

<button class="btn btn-block">Block button</button>
<button class="btn btn-block btn-primary">Block button</button>
Source file: ~/source/sass/component/button/button.scss
View source on GitHub