<div class="c-button-group">
<button class="c-button c-button--default">
<div class="c-button__label">Default button</div>
</button>
<button class="c-button c-button--primary">
<div class="c-button__label">Primary button</div>
</button>
<button class="c-button c-button--danger">
<div class="c-button__label">Danger button</div>
</button>
<button class="c-button c-button--success">
<div class="c-button__label">Success button</div>
</button>
<button class="c-button c-button--subtle">
<div class="c-button__label">Subtle button</div>
</button>
<button class="c-button c-button--link">
<div class="c-button__label">Link button</div>
</button>
</div>
<div class="c-button-group">
<button class="c-button c-button--default">
<div class="c-button__label">Default dropdown</div>
<i class="icon icon-caret-down c-button__caret"></i>
</button>
<button class="c-button c-button--default">
<i class="icon icon-calendar c-button__icon"></i>
<div class="c-button__label">Icon + label button</div>
</button>
<button class="c-button c-button--default c-button--icon">
<i class="icon icon-close c-button__icon"></i>
</button>
</div>
<div class="c-button-group">
<div class="c-button-group c-button-group--tabbed">
<button class="c-button c-button--default c-button--icon">
<i class="c-button__icon icon icon-zoom-out"></i>
</button>
<button class="c-button c-button--default c-button--icon">
<i class="c-button__icon icon icon-zoom-in"></i>
</button>
</div>
<div class="c-button-cross">
<button class="c-button c-button--default c-button--icon">
<i class="c-button__icon icon icon-chevron-top"></i>
</button>
<button class="c-button c-button--default c-button--icon">
<i class="c-button__icon icon icon-chevron-left"></i>
</button>
<button class="c-button c-button--default c-button--icon">
<i class="c-button__icon icon icon-reset"></i>
</button>
<button class="c-button c-button--default c-button--icon">
<i class="c-button__icon icon icon-chevron-right"></i>
</button>
<button class="c-button c-button--default c-button--icon">
<i class="c-button__icon icon icon-chevron-down"></i>
</button>
</div>
</div>