2.0 Buttons

A basic UI component triggering an action. Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

2.1 Default button

This is the simplest button use case with no modifiers implied. It can be applied on button, a and input[type:submit|type:reset|type:button] elements.

<button class="btn">Button</button>
<a class="btn">Link</a>
<input class="btn" type="submit" value="Submit">

2.2 Base style & state

  • default

    A button in normal state
  • :hover

    Hover state (also available though .hover)
  • :active

    Active state (also available though .active)
  • .disabled

    Disabled button. If you use <button> element, that is acceptable to add disabled attribute instead.

     
<button class="btn btn-primary {$modifiers}">Button</button>
<button class="btn btn-secondary {$modifiers}">Button</button>
<button class="btn btn-tertiary {$modifiers}">Button</button>

2.3 Colors

You can change the color of the button by adding any of these classes. You can customize the list of colored button you need by changing the list of colors in the buttons/variable.less file.

  • .btn-soil

    A button color soil (default value, this class is optional)
  • .btn-orange

    A button color orange
  • .btn-pool

    A button color pool
  • .btn-lime

    A button color lime

     
<button class="btn btn-primary {$modifiers}">Button</button>
<button class="btn btn-secondary {$modifiers}">Button</button>
<button class="btn btn-tertiary {$modifiers}">Button</button>

2.4 Type

There is three types of buttons:

  • .btn-primary

    Primary button, used to emphasize the main call to action (usually one per viewport).
  • .btn-secondary

    Secondary button, normal buttons (default value, this class is optional)
  • .btn-tertiary

    Tertiary button, light button, used generally inline, when you don't want to overload the interface.

     
<button class="btn {$modifiers}">Button</button>
<button class="btn {$modifiers} selected">Selected button</button>

2.5 Size

You can change the size of any button by adding these class.

  • .btn-xs

    An extra small button
  • .btn-sm

    A small button
  • .btn-md

    A medium button (default value, this class is optional)
  • .btn-lg

    A large button

     
<button class="btn btn-primary {$modifiers}">Button</button>
<button class="btn btn-secondary {$modifiers}">Button</button>
<button class="btn btn-tertiary {$modifiers}">Button</button>

2.6 Icons

Of course, buttons can also contains icons to reinforce the button action

<button class="btn btn-primary"><span class="icon icon-create"></span>Add a line</button>
<button class="btn btn-secondary"><span class="icon icon-tick"></span>Accept</button>
<button class="btn btn-tertiary"><span class="icon icon-bin"></span>Delete</button>