Basic Buttons

Use btn class to create a basic button. You can use btn-{color} class to change the button color.

Button Sizes

Use btn-{size} class to change the button size. You can use btn-xs, btn-sm, btn-md, btn-lg and btn-xl classes to change the button size. Default button size is btn-md.

Outline Buttons

Use btn with the btn-outline-{color} to create an outlined button.

Soft Buttons

Use btn with the btn-soft-{color} class to create a soft button.

Plain Buttons

Use btn with the btn-plain-{color} class to create a plain button.

Rounded Buttons

Use rounded-full class to create a rounded button.

Icon Buttons

Example of icon buttons.

Loading Buttons

Example of loading buttons.

Disabled Buttons

To disable a button, use disable="true" attribute on it.

Block Buttons

Use w-full class to create a block button.

Group Buttons

To create button groups, wrap all the buttons with a btn-group class.