Elements

Buttons

Use several predefined button styles, each serving its own semantic purpose.

Usage

The base button style can be used by applying the class .btn to a <button>, <a>, <input type="button">, <input type="submit"> tag.


Link

<button class="btn">Button</button>
<a href="#" class="btn">Link</a>
<input type="button" class="btn" value="Input type button" />
<input type="submit" class="btn" value="Input type submit" />

Button sizes

Buttons are avaliable in 2 sizes. Normal (applied on all buttons by default) and small. To create a small button, simply add the class .btn-sm.




// Normal
<button class="btn-solid-primary">Normal</button>
<button class="btn-outline-primary">Normal</button>

// Small
<button class="btn-solid-primary btn-sm">Small</button>
<button class="btn-outline-primary btn-sm">Small</button>

Button colors

Buttons are avaliable in several colors. To apply a color simply add the color name at the end of the button class name. The syntax will be btn-{solid or outline}-{color name}.

Avaliable colors

The buttons are avaliable in these colors.

Name Color
Primary #052951
Secondary #00B9EA
Danger #E10E49
Warning #FCD900
Success #00FF21

Button solid

The solid button is avaliable is all theme colors of the solution.

Usage

The solid button style can be used by applying the class .btn-solid-{color} to a <button>, <a>, <input type="button">, <input type="submit"> tag. SCSS mixins are also avaliable.

Use with classes

Use with SCSS mixin

<button class="btn-solid-primary">Button</button>
<button class="btn-solid-secondary">Button</button>
<button class="btn-solid-danger">Button</button>
<button class="btn-solid-warning">Button</button>
<button class="btn-solid-success">Button</button>
/*---------------------------------------*\
  Replace the $color parameter with 
  the desired button color.
\*---------------------------------------*/

.my-button {
  @include button-solid($color);
}

Button outline

The outline button is avaliable is all theme colors of the solution.

Usage

The outline button style can be used by applying the class .btn-outline-{color} to a <button>, <a>, <input type="button">, <input type="submit"> tag.

Use with classes

Use with SCSS mixin

<button class="btn-outline-primary">Button</button>
<button class="btn-outline-secondary">Button</button>
<button class="btn-outline-danger">Button</button>
<button class="btn-outline-warning">Button</button>
<button class="btn-outline-success">Button</button>
/*---------------------------------------*\
  Replace the $color parameter with 
  the desired button color.
\*---------------------------------------*/

.my-button {
  @include button-outline($color);
}

Button groups

There are no specific button group helper classes. Instead use the helper classes for alignment and spacing to meet your demands.

Example

A vertical button list could be constructed similar to the example below.

<div class="d-inline-flex flex-column">
  <button class="btn-outline-primary mb-2">Button</button>
  <button class="btn-outline-primary mb-2">Button</button>
  <button class="btn-outline-primary mb-0">Button</button>
</div>
Back to top