Buttons

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

Basic Button

To make a button a Blaze button add the <Button>Button</Button>

Link

<Button href="#">Link</Button>
<Button href="#">Link</Button>
<Button href="#" disabled>Button</Button>

Button Colours

There are four button colour modifiers primary, secondary, success and error.

<Button>Button</Button>
<Button primary>Button</Button>
<Button secondary>Button</Button>
<Button success>Button</Button>
<Button error>Button</Button>

Button Groups

To group related buttons together you can use the <ButtonGroup><ButtonGroup> wrapping element. This will bunch the buttons together and remove the spacing between them.

<ButtonGroup>
  <Button primary>Button</Button>
  <Button secondary>Button</Button>
</ButtonGroup>

Use the <ButtonGroup rounded> to make the first and last buttons rounded.

<ButtonGroup rounded>
  <Button primary>Button</Button>
  <Button secondary>Button</Button>
</ButtonGroup>

Button Sizes

<Button>Button</Button>
<Button size="xsmall">Button</Button>
<Button size="small">Button</Button>
<Button size="medium">Button</Button>
<Button size="large">Button</Button>
<Button size="super">Button</Button>

Full Width Buttons

<Button block>Button</Button>
<Button block size="xsmall">Button</Button>
<Button block size="small">Button</Button>
<Button block size="medium">Button</Button>
<Button block size="large">Button</Button>
<Button block size="super">Button</Button>

Ghost Buttons

<Button ghost>Button</Button>
<Button ghost size="xsmall">Button</Button>
<Button ghost size="small">Button</Button>
<Button ghost size="medium">Button</Button>
<Button ghost size="large">Button</Button>
<Button ghost size="super">Button</Button>

Ghost Colours

<Button ghost>Button</Button>
<Button ghost primary size="xsmall">Button</Button>
<Button ghost secondary size="small">Button</Button>
<Button ghost success size="medium">Button</Button>
<Button ghost error size="large">Button</Button>

Rounded Buttons

<Button rounded ghost>Button</Button>
<Button rounded ghost primary size="xsmall">Button</Button>
<Button rounded ghost secondary size="small">Button</Button>
<Button rounded ghost success size="medium">Button</Button>
<Button rounded ghost error size="large">Button</Button>