A button is just an anchor tag with the button
class. By setting the $button-tag-selector
variable to true
, plain <button>
tags can be styled as buttons as well.
Give buttons more semantic meaning with our built-in coloring classes.
Use these classes to change the size of a button.
Adding a class of disabled
will disable the hover state, and add a faded appearance.
Buttons can be converted to a hollow style with the hollow
class. All of the same coloring and sizing classes will work with it.
A button group is a series of buttons.
The same coloring and sizing classes for buttons can be used with button groups as well.
By default, the items of a button group will stack to the left. They can also expand out, so the button group becomes full-width, and each button becomes equal-width. To enable this behavior, add the class expand
to the button group container.
Individual buttons in the group can be styled with coloring classes, or the disabled
class.
The segmented
class will give buttons a hollow look. Add an is-active
class to an <li>
in the button group to fill it in.
A series of radio inputs can be transformed into a segmented button group.
Write a custom button class using our button mixins.