Color Variants


    <button class="btn btn-primary">Primary</button>

    <button class="btn btn-secondary">Secondary</button>

    <button class="btn btn-success">Success</button>

    <button class="btn btn-warning">Warning</button>

    <button class="btn btn-danger">Danger</button>

    <button class="btn btn-info">Info</button>

Outline Variants


    <button class="btn btn-outline">Outline</button>

    <button class="btn btn-outline-primary">Primary</button>

    <button class="btn btn-outline-success">Success</button>

Ghost and Link Styles


    <button class="btn btn-ghost">Ghost Button</button>

    <button class="btn btn-link">Link Button</button>

Sizes


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

    <button class="btn btn-primary">Default</button>

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

    <button class="btn btn-primary btn-xl">Extra Large</button>

States


    <button class="btn btn-primary" disabled>Disabled</button>

    <button class="btn btn-primary btn-loading">Loading</button>

Block Button


    <button class="btn btn-primary btn-block">Full Width Button</button>

Button Groups

Horizontal Group

Vertical Group


    <div class="btn-group">

      <button class="btn btn-outline-primary">Left</button>

      <button class="btn btn-outline-primary">Middle</button>

      <button class="btn btn-outline-primary">Right</button>

    </div>


    <div class="btn-group-vertical">

      <button class="btn btn-outline-secondary">Top</button>

      <button class="btn btn-outline-secondary">Middle</button>

      <button class="btn btn-outline-secondary">Bottom</button>

    </div>

Buttons as Links

Primary Link Outline Link Ghost Link


    <a href="/signup" class="btn btn-primary">Sign Up</a>

    <a href="/learn-more" class="btn btn-outline-secondary">Learn More</a>

CSS Classes Reference

Class	Description
`btn`	Base button class (required)
`btn-primary`	Primary color
`btn-secondary`	Secondary color
`btn-success`	Success/green color
`btn-warning`	Warning/yellow color
`btn-danger`	Danger/red color
`btn-info`	Info/blue color
`btn-outline`	Outline style (gray)
`btn-outline-*`	Outline with color (primary, secondary, success, warning, danger)
`btn-ghost`	Transparent background, visible on hover
`btn-link`	Link style (no background, no border)
`btn-sm`	Small size
`btn-lg`	Large size
`btn-xl`	Extra large size
`btn-block`	Full width
`btn-icon`	Square padding for icon buttons
`btn-loading`	Shows loading spinner
`btn-group`	Horizontal button group container
`btn-group-vertical`	Vertical button group container