Shipyard gives you more buttons than you can shake a stick at.
<button class="btn">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-primary-dark">Primary Dark</button>
<button class="btn btn-cta">CTA</button>
<button class="btn btn-caution">Caution</button>
<button class="btn btn-disabled">Disabled</button>
<button class="btn btn-link">Link</button>
Useful when you have a button on a darker background.
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-secondary-dark">Secondary Dark</button>
<button class="btn btn-secondary-link">Secondary Link</button>
Useful when you have a button on a darker background.
<button class="btn btn-inverse">Inverse</button>
<button class="btn btn-inverse-secondary">Inverse Secondary</button>
Rounded buttons utilize the border-radius utility, and are useful when you want a button with completely rounded corners.
<button class="btn rounded-pill">Rounded</button>
Useful when you have a button that triggers an asynchronous action.
<button class="btn btn-loading">Loading</button>
Often really useful on mobile screens or in combination with other grids.
<button class="btn btn-full">Save Changes</button>
The button classes can be applied to any type of html tag to achieve the desired result. The most common examples being the button, a, and input tags as seen in the example below.
<button class="btn">Button</button>
<a href="#" class="btn">Link</a>
<input type="button" class="btn" value="Input" />
<input type="submit" class="btn" value="Input" />
<input type="reset" class="btn" value="Input" />