Button Styles

For proper styling, use one of the required contextual classes (e.g., .btn-grad or .btn-primary)

Button Outline

For proper styling, use .btn-outline with base .btn class

Button Gradient Outline

Use these classes to match gradient button with background .on-bg-light, .on-bg-light-alt, .on-bg-theme, .on-bg-theme-alt, .on-bg-theme-dark, .on-bg-theme-dark-alt

Light BG
White Bg
Light Alt BG
Theme BG
Theme Dark BG
Theme Alt BG

Button With Badge

Just add badge in side of a button.

Button Size

Add an extra class .btn-sm & .btn-md for difrent sized button

Button Outline Size

Badge Styles

For proper styling, use one of the required contextual classes (e.g., .badge-primary)

  • Primary
  • Secondary
  • Info
  • Warning
  • Success
  • Danger
  • Dark
  • light

Badge Styles

For proper styling, use .badge-outline with base .badge class.

  • Primary
  • Secondary
  • Info
  • Warning
  • Success
  • Danger
  • Dark
  • light

Badge Size

Add an extra class .badge-xs & .badge-sm & .badge-md for difrent sized button

  • Badge
  • Badge
  • Badge
  • Badge