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.

Addon

You can add a counter or marker to button by adding .btn-{marker|counter} and combine with badge or marker component.

CS

Charlie Stone

Art Director

Upcoming events

12:00

Donec laoreet fringilla justo a pellentesque

13:20

Nunc quis massa nec enim

14:00

Praesent sit amet

Reports

Navigation

Settings

Performance

CPU Load
60%
CPU Temparature
42°
RAM Usage
6,532 MB

Customer care

Reports

Projects

May 14, 2020

Upcoming events

12:00

Donec laoreet fringilla justo a pellentesque

13:20

Nunc quis massa nec enim

14:00

Praesent sit amet