Buttons
Elements
<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>