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.
<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>