Button

Since v1.0.0

View source

Buttons include simple button styles for actions in differents types and size.

  

<button class="c-button">default button</button>
<button class="c-button c-button--primary">primary button</button>
<button class="c-button c-button--link">link button</button>

Add the c-button class to <a>, <input> or <button> elements for a default button. There are classes c-button--primary and c-button--link for predefined primary and link buttons.

Colors variants

       

<button class="c-button c-button--secondary">secondary button</button>
<button class="c-button c-button--success">success button</button>
<button class="c-button c-button--danger">danger button</button>
<button class="c-button c-button--warning">warning button</button>
<button class="c-button c-button--info">info button</button>
<button class="c-button c-button--light">light button</button>
<button class="c-button c-button--dark">dark button</button>
<button class="c-button c-button--white">white button</button>

Shapes variants

By default, buttons have rounded edges, but it's possible to keep straight edges by changing the $c-button-round-default Sass variable.

If this variable is set to false, it will automatically generate an additional class with the modifier --rounded.

  

<button class="c-button c-button--primary c-button--rounded">rounded button</button>
<button class="c-button c-button--primary c-button--pill">pill button</button>
<button class="c-button c-button--primary c-button--block">block button</button>

Outline variants

Under consideration...

States

More details about states will be added soon.

Sizes

Size modifiers can be added to increase, or dicrease, the size (with, height and font-size).

  

<button class="c-button c-button--primary c-button--small">small button</button>
<button class="c-button c-button--primary">normal/medium button</button>
<button class="c-button c-button--primary c-button--large">large button</button>

Button group

By adding the c-button-group to a parent, it allow you to create a stack of buttons and ajust borders and margins between them.

 

<div class="c-button--group">
  <button class="c-button c-button--danger">Previous</button>
  <button class="c-button c-button--success">Confirm</button>
</div>

<div class="c-button--group">
  <button class="c-button c-button--primary">Left</button>
  <button class="c-button c-button--primary">Middle</button>
  <button class="c-button c-button--primary">Right</button>
</div>

<div class="c-button--group c-button--group-vertical">
  <button class="c-button c-button--light">Top</button>
  <button class="c-button c-button--dark">Bottom</button>
</div>