Basic buttons
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>Basic Outline Buttons
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-link">Link</button>Rounded Buttons
<button type="button" class="btn rounded-xxl btn-primary">Primary</button>
<button type="button" class="btn rounded-xxl btn-secondary">Secondary</button>
<button type="button" class="btn rounded-xxl btn-success">Success</button>
<button type="button" class="btn rounded-xxl btn-danger">Danger</button>
<button type="button" class="btn rounded-xxl btn-warning">Warning</button>
<button type="button" class="btn rounded-xxl btn-info">Info</button>
<button type="button" class="btn rounded-xxl btn-light">Light</button>
<button type="button" class="btn rounded-xxl btn-dark">Dark</button>
<button type="button" class="btn rounded-xxl btn-link">Link</button>Rounded Outline Buttons
<button type="button" class="btn rounded-xxl btn-outline-primary">Primary</button>
<button type="button" class="btn rounded-xxl btn-outline-secondary">Secondary</button>
<button type="button" class="btn rounded-xxl btn-outline-success">Success</button>
<button type="button" class="btn rounded-xxl btn-outline-danger">Danger</button>
<button type="button" class="btn rounded-xxl btn-outline-warning">Warning</button>
<button type="button" class="btn rounded-xxl btn-outline-info">Info</button>
<button type="button" class="btn rounded-xxl btn-outline-light">Light</button>
<button type="button" class="btn rounded-xxl btn-outline-dark">Dark</button>
<button type="button" class="btn rounded-xxl btn-outline-link">Link</button>Rounded Outline Buttons
<button type="button" class="btn rounded-xxl btn-outline-primary">Primary</button>
<button type="button" class="btn rounded-xxl btn-outline-secondary">Secondary</button>
<button type="button" class="btn rounded-xxl btn-outline-success">Success</button>
<button type="button" class="btn rounded-xxl btn-outline-danger">Danger</button>
<button type="button" class="btn rounded-xxl btn-outline-warning">Warning</button>
<button type="button" class="btn rounded-xxl btn-outline-info">Info</button>
<button type="button" class="btn rounded-xxl btn-outline-light">Light</button>
<button type="button" class="btn rounded-xxl btn-outline-dark">Dark</button>
<button type="button" class="btn rounded-xxl btn-outline-link">Link</button>Label Buttons
<button type="button" class="btn rounded-xxl btn-label-primary">Primary</button>
<button type="button" class="btn rounded-xxl btn-label-secondary">Secondary</button>
<button type="button" class="btn rounded-xxl btn-label-success">Success</button>
<button type="button" class="btn rounded-xxl btn-label-danger">Danger</button>
<button type="button" class="btn rounded-xxl btn-label-warning">Warning</button>
<button type="button" class="btn rounded-xxl btn-label-info">Info</button>
<button type="button" class="btn rounded-xxl btn-label-light">Light</button>
<button type="button" class="btn rounded-xxl btn-label-dark">Dark</button>
<button type="button" class="btn rounded-xxl btn-label-link">Link</button>Label Rounded Buttons
<button type="button" class="btn rounded-xxl btn-label-primary">Primary</button>
<button type="button" class="btn rounded-xxl btn-label-secondary">Secondary</button>
<button type="button" class="btn rounded-xxl btn-label-success">Success</button>
<button type="button" class="btn rounded-xxl btn-label-danger">Danger</button>
<button type="button" class="btn rounded-xxl btn-label-warning">Warning</button>
<button type="button" class="btn rounded-xxl btn-label-info">Info</button>
<button type="button" class="btn rounded-xxl btn-label-light">Light</button>
<button type="button" class="btn rounded-xxl btn-label-dark">Dark</button>
<button type="button" class="btn rounded-xxl btn-label-link">Link</button>Ghost Buttons
<button type="button" class="btn btn-ghost-primary">Primary</button>
<button type="button" class="btn btn-ghost-secondary">Secondary</button>
<button type="button" class="btn btn-ghost-success">Success</button>
<button type="button" class="btn btn-ghost-danger">Danger</button>
<button type="button" class="btn btn-ghost-warning">Warning</button>
<button type="button" class="btn btn-ghost-info">Info</button>
<button type="button" class="btn btn-ghost-light">Light</button>
<button type="button" class="btn btn-ghost-dark">Dark</button>
<button type="button" class="btn btn-ghost-link">Link</button>Buttons With Icon
<button type="button" class="btn btn-primary">
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.5 1.49988L10.663 5.77853L15.5 6.46886L12 9.79746L12.826 14.4999L8.5 12.2785L4.174 14.4999L5 9.79746L1.5 6.46886L6.337 5.77853L8.5 1.49988Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Primary
</button>
<button type="button" class="btn btn-danger">
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.83203 5.23299C1.83203 3.99966 2.49203 3.89966 3.31203 3.89966H13.6854C14.5054 3.89966 15.1654 3.99966 15.1654 5.23299C15.1654 6.66632 14.5054 6.56632 13.6854 6.56632H3.31203C2.49203 6.56632 1.83203 6.66632 1.83203 5.23299Z" stroke="currentColor" stroke-width="1.5"/>
<g opacity="0.4">
<path d="M6.37232 1.33289L3.95898 3.75289" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.627 1.33289L13.0403 3.75289" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.00586 9.33289V11.6996" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M10.0742 9.33289V11.6996" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</g>
<path d="M2.83203 6.66687L3.77203 12.4269C3.98536 13.7202 4.4987 14.6669 6.40536 14.6669H10.4254C12.4987 14.6669 12.8054 13.7602 13.0454 12.5069L14.1654 6.66687" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
Orders
</button>
<button type="button" class="btn btn-label-primary">
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.5 1.49988L10.663 5.77853L15.5 6.46886L12 9.79746L12.826 14.4999L8.5 12.2785L4.174 14.4999L5 9.79746L1.5 6.46886L6.337 5.77853L8.5 1.49988Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Primary
</button>
<button type="button" class="btn btn-label-danger">
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.83203 5.23299C1.83203 3.99966 2.49203 3.89966 3.31203 3.89966H13.6854C14.5054 3.89966 15.1654 3.99966 15.1654 5.23299C15.1654 6.66632 14.5054 6.56632 13.6854 6.56632H3.31203C2.49203 6.56632 1.83203 6.66632 1.83203 5.23299Z" stroke="currentColor" stroke-width="1.5"/>
<g opacity="0.4">
<path d="M6.37232 1.33289L3.95898 3.75289" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.627 1.33289L13.0403 3.75289" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.00586 9.33289V11.6996" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M10.0742 9.33289V11.6996" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</g>
<path d="M2.83203 6.66687L3.77203 12.4269C3.98536 13.7202 4.4987 14.6669 6.40536 14.6669H10.4254C12.4987 14.6669 12.8054 13.7602 13.0454 12.5069L14.1654 6.66687" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
Orders
</button>
<button type="button" class="btn btn-outline-primary">
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.5 1.49988L10.663 5.77853L15.5 6.46886L12 9.79746L12.826 14.4999L8.5 12.2785L4.174 14.4999L5 9.79746L1.5 6.46886L6.337 5.77853L8.5 1.49988Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Primary
</button>
<button type="button" class="btn btn-outline-danger">
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.83203 5.23299C1.83203 3.99966 2.49203 3.89966 3.31203 3.89966H13.6854C14.5054 3.89966 15.1654 3.99966 15.1654 5.23299C15.1654 6.66632 14.5054 6.56632 13.6854 6.56632H3.31203C2.49203 6.56632 1.83203 6.66632 1.83203 5.23299Z" stroke="currentColor" stroke-width="1.5"/>
<g opacity="0.4">
<path d="M6.37232 1.33289L3.95898 3.75289" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.627 1.33289L13.0403 3.75289" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.00586 9.33289V11.6996" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M10.0742 9.33289V11.6996" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</g>
<path d="M2.83203 6.66687L3.77203 12.4269C3.98536 13.7202 4.4987 14.6669 6.40536 14.6669H10.4254C12.4987 14.6669 12.8054 13.7602 13.0454 12.5069L14.1654 6.66687" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
Orders
</button>Group Buttons
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic outlined example">
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
</div>Checkbox Buttons
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>Checkbox Buttons
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>Icon Buttons
Default
Label
Outline
Button Sizes
Sizes
<button type="button" class="btn btn-xl btn-primary">Button xl</button>
<button type="button" class="btn btn-lg btn-primary">Button lg</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-sm btn-primary">Button sm</button>
<button type="button" class="btn btn-xs btn-primary">Button xs</button>