Buttons

Primary Buttons

<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-secondary">Secondary</button>

Outline Buttons

<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-info">Info</button>
<button class="btn btn-outline-danger">Danger</button>

Button Sizes

<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-sm">Small</button>

Gradient Buttons

<button class="btn bg-gradient-primary">Primary</button>
<button class="btn bg-gradient-success">Success</button>

Icon Buttons

<button class="btn btn-primary">
  <i class="ni ni-settings-gear-65 me-1"></i> Settings
</button>

Usage Guidelines

  • Use Primary for the main action on a page (one per section)
  • Use Secondary or Outline for less prominent actions
  • Use Danger only for destructive actions (delete, remove)
  • Always include descriptive text; avoid icon-only buttons without aria-label
  • Use gradient variants sparingly for hero sections or CTAs
On this page