Buttons

Probably the first thing people look at when choosing a CSS toolkit. The common button!

Basic Button

To make a button a Blaze button add the .c-button class to buttons, inputs or links.

Link

<button class="c-button">Button</button>
<input type="button" class="c-button" value="Input">
<a class="c-button">Link</a>
<button class="c-button" disabled>Button</button>

Button colors

There are five button color modifiers .c-button--brand, .c-button--info, .c-button--warning, .c-button--success and .c-button--error.

<button class="c-button">Button</button>
<button class="c-button c-button--brand">Button</button>
<button class="c-button c-button--info">Button</button>
<button class="c-button c-button--warning">Button</button>
<button class="c-button c-button--success">Button</button>
<button class="c-button c-button--error">Button</button>

Button Groups

To group related buttons together you can use the .c-input-group wrapping element. This will bunch the buttons together and remove the spacing between them.

<span class="c-input-group">
  <button class="c-button c-button--brand">Button</button>
  <button class="c-button">Button</button>
</span>

Adding the .c-input-group--rounded modifier will make the first and last buttons rounded.

<span class="c-input-group c-button-group--rounded">
  <button class="c-button c-button--brand">Button</button>
  <button class="c-button">Button</button>
  <button class="c-button c-button--info">Button</button>
</span>

Button Sizes

Adding a size utility class will change the size of the button.

<button class="c-button u-xsmall">Button</button>
<button class="c-button u-small">Button</button>
<button class="c-button u-medium">Button</button>
<button class="c-button u-large">Button</button>
<button class="c-button u-xlarge">Button</button>
<button class="c-button u-super">Button</button>

Full Width Buttons

<button class="c-button c-button--block u-xsmall">Button</button>
<button class="c-button c-button--block u-small">Button</button>
<button class="c-button c-button--block u-medium">Button</button>
<button class="c-button c-button--block u-large">Button</button>
<button class="c-button c-button--block u-xlarge">Button</button>
<button class="c-button c-button--block u-super">Button</button>

Ghost Buttons

<button class="c-button c-button--ghost u-xsmall">Button</button>
<button class="c-button c-button--ghost u-small">Button</button>
<button class="c-button c-button--ghost u-medium">Button</button>
<button class="c-button c-button--ghost u-large">Button</button>
<button class="c-button c-button--ghost u-xlarge">Button</button>
<button class="c-button c-button--ghost u-super">Button</button>

Ghost colors

<button class="c-button c-button--ghost">Button</button>
<button class="c-button c-button--ghost-brand">Button</button>
<button class="c-button c-button--ghost-info">Button</button>
<button class="c-button c-button--ghost-warning">Button</button>
<button class="c-button c-button--ghost-success">Button</button>
<button class="c-button c-button--ghost-error">Button</button>

Rounded Buttons

<button class="c-button c-button--rounded c-button--ghost">Button</button>
<button class="c-button c-button--rounded c-button--ghost-brand">Button</button>
<button class="c-button c-button--rounded c-button--ghost-info">Button</button>
<button class="c-button c-button--rounded c-button--ghost-warning">Button</button>
<button class="c-button c-button--rounded c-button--ghost-success">Button</button>
<button class="c-button c-button--rounded c-button--ghost-error">Button</button>

Active state

<span class="c-input-group">
  <button class="c-button c-button--active c-button--info" type="button">Button 1</button>
  <button class="c-button c-button--info" type="button">Button 2</button>
</span>