1. Elements
  2. Buttons
Upgrade Account

Default Button

Use any of the available button classes to quickly create a styled button.

Default Primary Secondary Success Info Warning Danger Link

Light buttons

Make buttons the light to any .btn element. <a>s don’t support the light attribute, so you must add the .light class to make it visually appear light.

Default Primary Secondary Success Info Warning Danger

Disabled buttons

Make buttons the disabled to any .btn element. <a>s don’t support the disabled attribute, so you must add the .disabled class to make it visually appear disabled.

Primary Secondary Success Info Warning Danger

Color variations

The classic button, in different colors.

Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan Gray Dark gray

Outline buttons

The default modifier classes with the .btn-outline-*

Primary Primary Secondary Success Info Warning Danger

Square buttons

Add .btn-square to button to remove border-radius.

Default Primary Secondary Success Info Warning Danger

Square Light buttons

Add .btn-square to button to remove border-radius.

Default Primary Secondary Success Info Warning Danger

Rounded buttons

Add .btn-pill class to any button more rounded.

Default Primary Secondary Success Info Warning Danger

Rounded buttons

Add .btn-pill class to any button more rounded.

Default Primary Secondary Success Info Warning Danger

Button with icon

Basic buttons are traditional buttons with borders color opitons.

Button with icon-loader

Basic buttons are traditional buttons with borders color opitons.

Button size

Add .btn-lg or .btn-sm or .btn-block for additional sizes.

Social buttons

Social buttons

You can use only icons.

Icon buttons

Icon only button. Add .btn-icon class to remove unnecessary button.

Loading button

Add .btn-loading to use a loading state on a button. The width of the button depends on the length of the text inside Since the loading spinner is implemented using the element.



Button dropdown

Wrap the dropdown’s toggle using different colors and icons implemented in different dropdowns styles (your button or link) and the dropdown menu within .dropdown, or another element that declares position: relative;. Dropdowns can be triggered from <a> or <button> elements to better fit your potential needs.

Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link

List of buttons

You can now create a list of buttons with the .btn-list container.

Save changes Save and continue Cancel

Use the .text-center modifiers to alter the alignment.

Save changes Save and continue Cancel

Use the .text-end modifiers to alter the alignment.

Save changes Save and continue Cancel

Width Buttons

You can now create a width buttons with the .btn-w-* container.

XS SM MD LG