Features – Buttons

Styling code snippets

The styles below can be used with button tags, link (anchor) tags, and the form submit tags. Combine them to change button colour, size and add any of the 250 available icons.

Button class="" Description
btn Standard gray button
btn btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
btn btn-secondary Provides extra visual weight and identifies the primary action in a set of buttons
btn btn-info Used as an alternative to the default styles
btn btn-success Indicates a successful or positive action
btn btn-warning Indicates caution should be taken with this action
btn btn-danger Indicates a dangerous or potentially negative action
btn btn-inverse Alternate dark gray button, not tied to a semantic action or use
btn btn-link Make the button look like a link, but maintain button behavior

Button sizes

Create block level buttons – those that span the full width of a parent— by adding .btn-block.

Buttons with icons

To learn more check the documentation.

Style Switcher

Layout Wide Boxed
Background patterns * pattern 1 pattern 2 pattern 3 pattern 4 pattern 5 pattern 6

* Boxed layout only