Button

Easily create versatile buttons in a variety of styles.

Usage

Link

<a href="#" class="c-button">Link</a>
<button class="c-button">c-button</button>
<button class="c-button" disabled>Disabled</button>

Sizing modifiers

Extra small Small Standard Large Extra Large Block button

<a href="#" class="c-button c-button--xs">Extra small</a>
<a href="#" class="c-button c-button--sm">Small</a>
<a href="#" class="c-button">Standard</a>
<a href="#" class="c-button c-button--lg">Large</a>
<a href="#" class="c-button c-button--xl">Extra Large</a>
<a href="#" class="c-button c-button--block">Block button</a>

Priority modifiers

Primary Secondary Basic Hover Link Success Error

<a href="#" class="c-button c-button--primary">Primary</a>
<a href="#" class="c-button c-button--secondary">Secondary</a>
<a href="#" class="c-button c-button--basic">Basic</a>
<a href="#" class="c-button c-button--hover">Hover</a>
<a href="#" class="c-button c-button-__link">Link</a>
<a href="#" class="c-button c-button--success">Success</a>
<a href="#" class="c-button c-button--error">Error</a>

Icon buttons

Settings Dropdown Back

<a href="#" class="c-button c-button--icon">{{ icon('gear') }}<small class="srOnly"> Settings</small></a>
<a href="#" class="c-button c-button--icon">Dropdown {{ icon('chevron-down') }}</a>
<a href="#" class="c-button c-button--icon">{{ icon('arrow-left') }} Back</a>

Content swap buttons

<button class="c-button c-button--swap">
  <div class="c-button__content">Hover on me</div>
  <div class="c-button__content c-button__content--hidden">More stuff</div>
</button>

<button class="c-button c-button--swap c-button--ani">
  <div class="c-button__content">Next</div>
  <div class="c-button__content c-button__content--hidden">{{ icon('arrow-right') }}</div>
</button>

<button class="c-button c-button--swap c-button--vertical c-button--ani">
  <div class="c-button__content">Top</div>
  <div class="c-button__content c-button__content--hidden">{{ icon('arrow-up') }}</div>
</button>

<button class="c-button c-button--swap c-button--aniFade">
  <div class="c-button__content">Hover on me</div>
  <div class="c-button__content c-button__content--hidden">I fade in</div>
</button>

Javascript: Toggle module

You can toggle states via an asynchronously loaded javascript Toggle module. Just add the data attribute data-module="Toggle"

<button class="c-button" data-module="Toggle">Toggle me</button>
<button class="c-button c-button--primary" data-module="Toggle">Toggle me</button>
<button class="c-button c-button--hover" data-module="Toggle">Toggle me</button>
<button class="c-button c-button--swap c-button--aniFade c-button--swapToggle" data-module="Toggle">
  <div class="c-button__content">Toggle me</div>
  <div class="c-button__content--hidden">I'm toggled</div>
</button>

Loading submit button

The 'content swap button' and the 'Toggle module' can be used together to create a button that when clicked once, shows a loading icon and it can not be clicked again.

<button class="c-button c-button--primary c-button--swap c-button--aniFade c-button--swapToggle" data-module="Toggle" data-options='{"once":true}'>
  <div class="c-button__content">Submit me</div>
  <div class="c-button__content c-button__content--hidden">{{ icon('spinner', 'o-icon--spin') }}</div>
</button>