## Skin Options

### Skin Colour

The standard bootstrap buttons, plus extra variants that come with Varello

Default White Primary Success Info Warning Danger Purple Pink Faded Blue Link

These buttons fill with their chosen colour when you hover over them

Default White Primary Success Info Warning Danger Purple Pink Faded Blue

The `.btn-pill` class gives all buttons a rounded look

Default White Primary Success Info Warning Danger Purple Pink Faded Blue

Default White Primary Success Info Warning Danger Purple Pink Faded Blue

Varello provides you with a fifth, XL button along with the default four that come with bootstrap

Extra Large Button Extra Large Button

Large Button Large Button

Standard Button Standard Button

Small Button Small Button

Extra Small Button Extra Small Button

Group collections of buttons together to make a toolbar-esque element flow

When you need to place a dropdown within the flow of the content, use a button dropdown

When you want to use a button dropdown, but want the main text to cause a different action than the caret (), then use a split-button dropdown.

Like normal buttons, there are 5 variants that come with Varello

To make a dropdown open from the top, use the `.dropup` class on the button group

Make buttons span the entire width of their containing element

Block Level Button Block Level Button Block Level Button Block Level Button

These also work as pills, and with all the size variants

Extra Large Button Large Button Default Button Small Button Extra Small Button

The disabled state can be applied through a `.disabled` class or the disabled property on buttons

Default White Primary Success Info Warning Danger Purple Pink Faded Blue Link

Like the disabled state, the active state can be applied like so

Default White Primary Success Info Warning Danger Purple Pink Faded Blue Link

If buttons have related functionality, they can be placed in a button group like so, with 4 different size variations

Large
Copy Paste Left Center Right
Default
Copy Paste Left Center Right
Small
Copy Paste Left Center Right
Extra Small
Copy Paste Left Center Right

Place a button group inside another one when you want a dropdown menu nested within them.

The vertical button group variant comes with Bootstrap

Make a button group span the entire width of it's containing element

The `.btn-faded` class allows you to keep a button active but have it faded-out until the user hovers over it.

Default White Primary Success Info Warning Danger Purple Pink Faded Blue Default White Primary Success Info Warning Danger Purple Pink Faded Blue

Default White Primary Success Info Warning Danger Purple Pink Faded Blue Default White Primary Success Info Warning Danger Purple Pink Faded Blue