As well as standard bootstrap buttons, we provide custom variants to allow you to give more context to them.
Varello provides you with a fifth, XL button along with the default four that come with bootstrap
Extra Large Button Extra Large 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
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