
Buttons
Custom button styles for actions in forms, dialogs, etc.
Solid (default)
<!-- Primary button -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Accent button -->
<button type="button" class="btn btn-accent">Accent</button>
<!-- Secondary button -->
<button type="button" class="btn btn-secondary">Secondary</button>
<!-- Success button -->
<button type="button" class="btn btn-success">Success</button>
<!-- Danger button -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Warning button -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Info button -->
<button type="button" class="btn btn-info">Info</button>
<!-- Light button -->
<button type="button" class="btn btn-light">Info</button>
<!-- Dark button -->
<button type="button" class="btn btn-dark">Dark</button>
<!-- Link button -->
<button type="button" class="btn btn-link">Link</button>
Outline
<!-- Primary button -->
<button type="button" class="btn btn-outline-primary">Primary</button>
<!-- Accent button -->
<button type="button" class="btn btn-outline-accent">Accent</button>
<!-- Secondary button -->
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<!-- Success button -->
<button type="button" class="btn btn-outline-success">Success</button>
<!-- Danger button -->
<button type="button" class="btn btn-outline-danger">Danger</button>
<!-- Warning button -->
<button type="button" class="btn btn-outline-warning">Warning</button>
<!-- Info button -->
<button type="button" class="btn btn-outline-info">Info</button>
<!-- Light button -->
<button type="button" class="btn btn-outline-light">Info</button>
<!-- Dark button -->
<button type="button" class="btn btn-outline-dark">Dark</button>
Button shadow (solid buttons only)
<!-- Primary button -->
<button type="button" class="btn btn-primary btn-shadow">Primary</button>
<!-- Accent button -->
<button type="button" class="btn btn-accent btn-shadow">Accent</button>
<!-- Secondary button -->
<button type="button" class="btn btn-secondary btn-shadow">Secondary</button>
<!-- Success button -->
<button type="button" class="btn btn-success btn-shadow">Success</button>
<!-- Danger button -->
<button type="button" class="btn btn-danger btn-shadow">Danger</button>
<!-- Warning button -->
<button type="button" class="btn btn-warning btn-shadow">Warning</button>
<!-- Info button -->
<button type="button" class="btn btn-info btn-shadow">Info</button>
<!-- Light button -->
<button type="button" class="btn btn-light btn-shadow">Info</button>
<!-- Dark button -->
<button type="button" class="btn btn-dark btn-shadow">Dark</button>
Icons
<!-- Primary button with text and icon -->
<button type="button" class="btn btn-primary">
<i class="ci-user me-2"></i>
Profile
</button>
<!-- Secondary solid icon button -->
<button type="button" class="btn btn-secondary btn-icon">
<i class="ci-edit"></i>
</button>
<!-- Danger outline icon button -->
<button type="button" class="btn btn-outline-danger btn-icon">
<i class="ci-trash"></i>
</button>
<!-- Success solid icon button -->
<button type="button" class="btn btn-success btn-icon">
<i class="ci-check"></i>
</button>
<!-- Warning pill solid icon button -->
<button type="button" class="btn btn-warning rounded-pill btn-icon">
<i class="ci-star"></i>
</button>
<!-- Info pill outline icon button -->
<button type="button" class="btn btn-outline-info rounded-pill btn-icon">
<i class="ci-bookmark"></i>
</button>
Market buttons
Download on theApp StoreDownload on theGoogle PlayDownload on theWindows StoreOrder now atAmazon.com
<!-- App Store button -->
<a href="#" class="btn-market btn-apple" role="button">
<span class="btn-market-subtitle">Download on the</span>
<span class="btn-market-title">App Store</span>
</a>
<!-- Google Play button -->
<a href="#" class="btn-market btn-google" role="button">
<span class="btn-market-subtitle">Download on the</span>
<span class="btn-market-title">Google Play</span>
</a>
<!-- Windows store button -->
<a href="#" class="btn-market btn-windows" role="button">
<span class="btn-market-subtitle">Download on the</span>
<span class="btn-market-title">Windows Store</span>
</a>
<!-- Amazon button -->
<a href="#" class="btn-market btn-amazon" role="button">
<span class="btn-market-subtitle">Order now at</span>
<span class="btn-market-title">Amazon.com</span>
</a>
Shapes
<!-- Rounded solid button -->
<button type="button" class="btn btn-primary">Rounded</button>
<!-- Pill solid button -->
<button type="button" class="btn btn-primary rounded-pill">Pill button</button>
<!-- Square solid button -->
<button type="button" class="btn btn-primary rounded-0">Square</button>
<!-- Rounded outline button -->
<button type="button" class="btn btn-outline-primary">Rounded</button>
<!-- Pill outline button -->
<button type="button" class="btn btn-outline-primary rounded-pill">Pill button</button>
<!-- Square outline button -->
<button type="button" class="btn btn-outline-primary rounded-0">Square</button>
Sizes
<!-- Large solid button -->
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<!-- Normal solid button -->
<button type="button" class="btn btn-primary">Normal button</button>
<!-- Small solid button -->
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<!-- Large outline button -->
<button type="button" class="btn btn-outline-primary btn-lg">Large button</button>
<!-- Normal outline button -->
<button type="button" class="btn btn-outline-primary">Normal button</button>
<!-- Small outline button -->
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<!-- Block solid button -->
<button type="button" class="btn btn-primary d-block w-100">Block level button</button>
<!-- Block outline button -->
<button type="button" class="btn btn-outline-primary d-block w-100">Block level button</button>
States
<!-- Button states -->
<button type="button" class="btn btn-primary active">Active</button>
<button type="button" class="btn btn-secondary active">Active</button>
<button type="button" class="btn btn-primary" disabled>Disabled</button>
<button type="button" class="btn btn-secondary" disabled>Disabled</button>
<button type="button" class="btn btn-primary" data-bs-toggle="button">Button toggle</button>
<button type="button" class="btn btn-primary">
<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
Loading...
</button>
<button type="button" class="btn btn-secondary">
<span class="spinner-grow spinner-grow-sm me-2" role="status" aria-hidden="true"></span>
Loading...
</button>
Like / dislike buttons
Idle state
Active state
<!-- Like / dislike idle state -->
<div class="text-nowrap">
<button type="button" class="btn-like">16</button>
<button type="button" class="btn-dislike">4</button>
</div>
<!-- Like / dislike active state -->
<div class="text-nowrap">
<button type="button" class="btn-like active">16</button>
<button type="button" class="btn-dislike active">4</button>
</div>