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.
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.