We are working on something new! Check it out here!

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
  • .btn-outline - Outline button

Example

<button class="btn">Button base</button>
<button class="btn disabled">Button base</button>
<button class="btn btn-outline">Button base</button>
Source file: ~/source/sass/components/button/_button.scss

Floating button

Circle shaped button with icon

Example

<a href="#main-content" class="btn btn-floating btn-lg"><i class="pricon pricon-plus"></i></a>
Source file: ~/source/sass/components/button/_button.scss

Button: Primary

Buttons

Modifiers

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

Example

<button class="btn btn-primary">Primary button</button>
<button class="btn btn-primary disabled">Primary button</button>
<button class="btn btn-outline btn-primary">Primary button</button>
Source file: ~/source/sass/components/button/_button.scss

Button: Contrasted

Uses a 50% black foreground color to contrast to any background.

Example

<button class="btn btn-contrasted">Primary button</button>
<button class="btn btn-contrasted disabled">Primary disabled button</button>
Source file: ~/source/sass/components/button/_button.scss

Button: Light

Light button should be used on dark backgrounds

Example

<button class="btn btn-light">Light button</button>
<button class="btn btn-light disabled">Light disabled button</button>
<button class="btn btn-outline btn-light">Light button</button>
Source file: ~/source/sass/components/button/_button.scss

Button: Danger

Buttons

Example

<button class="btn btn-danger">Danger button</button>
<button class="btn btn-danger disabled">Disabled Danger button</button>
<button class="btn btn-outline btn-danger">Danger button</button>
Source file: ~/source/sass/components/button/_button.scss

Button: Plain

Buttons

Example

Plain button
<a href="#" class="btn btn-plain">Plain button</a>
<button class="btn btn-plain">Plain button</button>
Source file: ~/source/sass/components/button/_button.scss

Button: Themed buttons

Buttons with color theme colors

Modifiers

  • .btn-theme-first -
  • .btn-theme-second -
  • .btn-theme-third -
  • .btn-theme-fourth -
  • .btn-theme-fifth -

Example

<button class="btn btn-theme-first">First color</button>
<button class="btn btn-theme-second">Second color</button>
<button class="btn btn-theme-third">Third color</button>
<button class="btn btn-theme-fourth">Fourth color</button>
<button class="btn btn-theme-fifth">Fifth color</button>
Source file: ~/source/sass/components/button/_button.scss

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>
<button class="btn btn-floating btn-sm"><i class="pricon pricon-plus"></i></button>
<button class="btn btn-floating"><i class="pricon pricon-plus"></i></button>
<button class="btn btn-floating btn-lg"><i class="pricon pricon-plus"></i></button>
Source file: ~/source/sass/components/button/_button.scss

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/components/button/_button.scss

Offcanvas button

Button that's outside the canvas (window) until it's focused. Mainly used for keyboard navigation shortcuts.

Example

<a href="#main-content" class="btn btn-offcanvas">Jump to main content</a>
Source file: ~/source/sass/components/button/_button.scss