Buttons

Predefined button styles, each serving its own semantic purpose.

A button with small and large size.

Predefined button styles, each serving its own semantic purpose.

Predefined button styles, each serving its own semantic purpose.

Predefined button styles, each serving its own semantic purpose.

Class Values
class="btn btn-outline-[value]" primary | success | info | warning | danger | indigo | turtle | teal | pink | orange

A very rounded corner for both basic and outline buttons.

Class Values
class="btn btn-oblong btn-[value]" primary | success | warning | danger | info | teal | indigo | purple | pink | light | dark
class="btn btn-oblong btn-outline-[value]"

A basic button with added icons.

For more icons to use, go to icons page of this template.

A button variant for using only icons.

A button with added dropdown.

Group a series of buttons together on a single line with the button group.