Usually a button element should be used, although an a, an input[type=button], an input[type=reset] or an input[type=submit] could be used.

The simplest is just a plain button:

Click meGo here

<button class="c-btn c-btn--medium">Click me</button><a class="c-btn c-btn--medium" href="http://google.com" role="button">Go here</a>
<input type="button" class="c-btn c-btn--medium" value="Send">
<input type="reset" class="c-btn c-btn--medium" value="Reset">
<input type="submit" class="c-btn c-btn--medium" value="Submit">

Other types are secondary, success and danger:

SecondaryHooray!Delete

<button class="c-btn c-btn--secondary c-btn--medium">Secondary</button><button class="c-btn c-btn--success c-btn--medium">Hooray!</button><button class="c-btn c-btn--danger c-btn--medium">Delete</button>

A button can also be disabled (even link type buttons):

Don't click this!

<button class="c-btn c-btn--disabled c-btn--medium" disabled>Don't click this!</button>

A button can also be selectable, either as a checkbox (default) or a radio.

See button groups for how these work in practice.

Selectable Another selectable

<input type="checkbox" id="chk1" name="" class="c-btn--selectable" value="Selectable">
<label for="chk1" class="c-btn  c-btn--medium c-btn--selectable__label" role="button">Selectable</label>
<input type="radio" id="rad1" name="" class="c-btn--selectable" value="Another selectable">
<label for="rad1" class="c-btn  c-btn--medium c-btn--selectable__label" role="button">Another selectable</label>

They can be combined with size, type and icons.

Stop Tweet this

<input type="checkbox" id="chk2" name="" class="c-btn--selectable" value="Stop">
<label for="chk2" class="c-btn  c-btn--secondary c-btn--large c-btn--selectable__label" role="button"><i class="c-icon c-icon--stop c-icon--before"></i>Stop</label>
<input type="radio" id="rad2" name="" class="c-btn--selectable" value="Tweet this">
<label for="rad2" class="c-btn  c-btn--danger c-btn--small c-btn--selectable__label" role="button"><i class="c-icon c-icon--above c-icon--twitter"></i>Tweet this</label>
<input type="checkbox" id="chk3" name="" class="c-btn--selectable" value="">
<label for="chk3" class="c-btn  c-btn--success c-btn--huge c-btn--selectable__label" role="button"><i class="c-icon c-icon--twitter"></i></label>

You can define the size of the button too:

Huge buttonLarge buttonMedium buttonSmall buttonTiny button

<button class="c-btn c-btn--huge">Huge button</button><button class="c-btn c-btn--large">Large button</button><button class="c-btn c-btn--medium">Medium button</button><button class="c-btn c-btn--small">Small button</button><button class="c-btn c-btn--tiny">Tiny button</button>

It's also easy to add an icon to a button, either at the front, the end, (or both (which doesn't look good, so don't do it)), above the text or on its own.

StopPlayPlease don't do thisTweet this

<button class="c-btn c-btn--medium"><i class="c-icon c-icon--stop c-icon--before"></i>Stop</button><button class="c-btn c-btn--medium">Play<i class="c-icon c-icon--play c-icon--after"></i></button><button class="c-btn c-btn--medium"><i class="c-icon c-icon--fast-backward c-icon--before"></i>Please don't do this<i class="c-icon c-icon--fast-forward c-icon--after"></i></button><button class="c-btn c-btn--medium"><i class="c-icon c-icon--above c-icon--twitter"></i>Tweet this</button><button class="c-btn c-btn--medium"><i class="c-icon c-icon--heart"></i></button>

You can join this all together to make a monster button:

Delete this thing

<button class="c-btn c-btn--danger c-btn--large">Delete this thing<i class="c-icon c-icon--trash c-icon--after"></i></button>

And, just for testing, here's a button with text on multiple lines:

Bippitty
Boppity
Boo

<button class="c-btn c-btn--medium">Bippitty<br>Boppity<br>Boo</button>

Block buttons

A block button takes 100% of the width of the containing element. They're useful for finishing off a form, when there's only one option.

HeadShouldersKneesToesIf you can read this you're too close

<button class="c-btn c-btn--huge c-btn--block">Head<i class="c-icon c-icon--user c-icon--after"></i></button><button class="c-btn c-btn--large c-btn--block"><i class="c-icon c-icon--users c-icon--before"></i>Shoulders</button><button class="c-btn c-btn--medium c-btn--block">Knees</button><button class="c-btn c-btn--small c-btn--block">Toes</button><button class="c-btn c-btn--tiny c-btn--block">If you can read this you're too close</button>

Options

• button
• button-link
• button-input
• button-submit
• button-reset
• button-selectable
  • text: the text on the button (required)
  • type: one of default (default), cancel, primary and highlight
  • size: one of tiny, small, medium (default), large or huge
  • icon-above: the type of icon to go above the text (or replace it if there is no text) (doesn't work with input[type=submit], input[type=reset] or input[type=button])
  • icon-before: the type of icon to appear at the front of the button (doesn't work with input[type=submit], input[type=reset] or input[type=button])
  • icon-after: the type of icon to appear at the end of the button (doesn't work with input[type=submit], input[type=reset] or input[type=button])
  • href: the URL to visit when clicked (only for button-link, defaults to "#")
  • block: (Boolean) defaults to false
  • disabled: is the button disabled? (Boolean) defaults to false
• button-selectable only
  • checkbox/radio: (Boolean) defaults to checkbox
  • id: (String) (required)