Buttons

Buttons are designed to work with an actual <button> or <a>. The styles will of course work on a span or a div etc but they will not be keyboard accessible. If you really need to use something other than a link or a button you can make it keyboard accessible by applying tabindex="0" to that element.

Button colours

Any style of button can take on any of the following colours.

Button sizes

To use different sizes add a class of either .btn-xs, .btn-sm or .btn-lg to the button. No additional class is needed when using the default. All colours are supported.

Button with loader

To use buttons as loaders, place a span with a class of .bc-loader inside of the button. The state of the button and loader is controlled via classes on the .btn itself. All colours are supported.

`.btn-is-loading`

`.btn-has-loaded`

Button - Square

To use square buttons add a class of .btn-square to the button. All colours are supported.

Block Button sizes with without arrows

To use block buttons add a class of .btn-block to the button. All colours are supported.

…with icons

Icons are not generally used with buttons but if needed then just inset icon markup inside the button and the icon will be placed right aligned and vertically centered. All colours are available.