Buttons

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

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

DefaultWhitePrimarySuccessInfoWarningDangerPurplePinkFaded Blue

The .btn-pillclass gives all buttons a rounded look

DefaultWhitePrimarySuccessInfoWarningDangerPurplePinkFaded Blue

DefaultWhitePrimarySuccessInfoWarningDangerPurplePinkFaded Blue

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

Extra Large ButtonExtra Large Button

Large ButtonLarge Button

Standard ButtonStandard Button

Small ButtonSmall Button

Extra Small ButtonExtra 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 .dropupclass on the button group

Make buttons span the entire width of their containing element

Block Level ButtonBlock Level ButtonBlock Level ButtonBlock Level Button

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

Extra Large ButtonLarge ButtonDefault ButtonSmall ButtonExtra Small Button

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

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

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

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