Buttons
Variants
The .btn classes are designed to be used with the
<button> element. However, you can also use these classes on
<a> or <input> elements (though some browsers may apply a
slightly different rendering).
Solid
These is a standard button variant, you can use these by extending
.btn-{color} classes
Outline
Replace the default modifier classes with the
.btn-outline-{color} to apply these variants
Flat
Replace the default modifier classes with the
.btn-flat-{color} to apply these variants
Label
Replace the default modifier classes with the
.btn-label-{color} to apply these variants
Text
Replace the default modifier classes with the
.btn-text-{color} to apply these variants
Pill buttons
Extend button class with .rounded-pill to make the button more
rounded.
Sizing
Make your button larger or smaller by adding .btn-lg or
.btn-sm classes to button.
Taller, wider and block
You can't use the classes below together with .btn-icon
Wide
Add .btn-{wide|wider|widest} to make your button wider.
Tall
Add .btn-{tall|taller|tallest} to make your button taller.
Block
Create responsive stacks of full-width, “block buttons” like those in Bootstrap 4 with a mix of our display and gap utilities.
Button icon
Square buttons
If you need square button with an icon inside, you can use
.btn-icon and combine with button variant classes.
Circle buttons
Make your icon buttons circular by extending .btn-icon with
.btn-circle modifier class.
Icon with text
If you want to use icon with text, you don't need to apply
.btn-icon
States
Add .active or .disabled for the active or inactive
button appearance.