Linel
Garrett Winters
UX DesignerLorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, eius.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, eius.
2 min agoLorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, eius.
1 min agoLorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, eius.
2 min agoLinel
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.