Elements

Link
<a class="btn" href="#" role="button">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input" />
<input class="btn" type="submit" value="Submit" />
<input class="btn" type="reset" value="Reset" />

Default

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-primary" disabled>Disabled</button>

Pastel

<button type="button" class="btn btn-primary btn-pastel">Primary</button>
<button type="button" class="btn btn-secondary btn-pastel">Secondary</button>
<button type="button" class="btn btn-success btn-pastel">Success</button>
<button type="button" class="btn btn-warning btn-pastel">Warning</button>
<button type="button" class="btn btn-danger btn-pastel">Danger</button>
<button type="button" class="btn btn-primary btn-pastel" disabled>
	Disabled
</button>

Shadow

<button type="button" class="btn btn-primary btn-shadow">Primary</button>
<button type="button" class="btn btn-secondary btn-shadow">Secondary</button>
<button type="button" class="btn btn-success btn-shadow">Success</button>
<button type="button" class="btn btn-warning btn-shadow">Warning</button>
<button type="button" class="btn btn-danger btn-shadow">Danger</button>
<button type="button" class="btn btn-primary btn-shadow" disabled>
	Disabled
</button>

Icon Only

<button type="button" class="btn btn-primary btn-icon"></button>
<button type="button" class="btn btn-secondary btn-icon"></button>
<button type="button" class="btn btn-secondary btn-icon btn-shadow"></button>
<button type="button" class="btn btn-secondary btn-pastel btn-icon"></button>

Padded

<button type="button" class="btn btn-primary btn-padded">Primary</button>
<button type="button" class="btn btn-secondary btn-padded">Secondary</button>
<button type="button" class="btn btn-secondary btn-padded btn-shadow">
	Info
</button>
<button type="button" class="btn btn-secondary btn-pastel btn-padded">
	clear all
</button>
<button type="button" class="btn btn-secondary btn-pastel btn-padded btn-icon"></button>

Large

<button type="button" class="btn btn-primary btn-large">Primary</button>
<button type="button" class="btn btn-secondary btn-large">Secondary</button>
<button type="button" class="btn btn-secondary btn-large btn-shadow">
	Info
</button>
<button type="button" class="btn btn-secondary btn-pastel btn-large">
	clear all
</button>
<button type="button" class="btn btn-secondary btn-pastel btn-large btn-icon"></button>

Small

Use with caution: these do not meet touch accessibility targets.

<button type="button" class="btn btn-primary btn-small">Primary</button>
<button type="button" class="btn btn-secondary btn-small">Secondary</button>
<button type="button" class="btn btn-secondary btn-small btn-shadow">
	Info
</button>
<button type="button" class="btn btn-secondary btn-pastel btn-small">
	clear all
</button>
<button type="button" class="btn btn-secondary btn-pastel btn-small btn-icon"></button>

Tiny

Use with caution: these do not meet touch accessibility targets.

<button type="button" class="btn btn-primary btn-tiny">Primary</button>
<button type="button" class="btn btn-secondary btn-tiny">Secondary</button>
<button type="button" class="btn btn-secondary btn-tiny btn-shadow">
	Info
</button>
<button type="button" class="btn btn-secondary btn-pastel btn-tiny">
	clear all
</button>
<button type="button" class="btn btn-secondary btn-pastel btn-tiny btn-icon"></button>