Skip to main content

Buttons

Probably the first thing people look at when choosing a UI 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 type="button" class="c-button">Button</button>
<input type="button" class="c-button" value="Input">
<a class="c-button">Link</a>
<button type="button" class="c-button" disabled>Button</button>

Button Colors

There are five button color modifiers:

<button type="button" class="c-button">Button</button>
<button type="button" class="c-button c-button--brand">Button</button>
<button type="button" class="c-button c-button--info">Button</button>
<button type="button" class="c-button c-button--warning">Button</button>
<button type="button" class="c-button c-button--success">Button</button>
<button type="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 type="button" class="c-button c-button--brand">Button</button>
  <button type="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-input-group--rounded">
  <button type="button" class="c-button c-button--brand">Button</button>
  <button type="button" class="c-button">Button</button>
  <button type="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 type="button" class="c-button u-xsmall">.u-xsmall</button>
<button type="button" class="c-button u-small">.u-small</button>
<button type="button" class="c-button u-medium">.u-medium</button>
<button type="button" class="c-button u-large">.u-large</button>
<button type="button" class="c-button u-xlarge">.u-xlarge</button>
<button type="button" class="c-button u-super">.u-super</button>

Full Width Buttons

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

Ghost Buttons

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

Ghost colors

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

Rounded Buttons

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

Active state

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