<!-- Base Buttons -->
<button type="button" class="btn btn-primary waves-effect waves-light">Primary</button> 

 <button type="button" class="btn btn-secondary waves-effect waves-light">Secondary</button> 

 <button type="button" class="btn btn-success waves-effect waves-light">Success</button> 

 <button type="button" class="btn btn-info waves-effect waves-light">Info</button> 

 <button type="button" class="btn btn-warning waves-effect waves-light">Warning</button> 

 <button type="button" class="btn btn-danger waves-effect waves-light">Danger</button> 

 <button type="button" class="btn btn-dark waves-effect waves-light">Dark</button> 

 <button type="button" class="btn btn-light waves-effect">Light</button> 

 <!-- Outline Buttons -->
<button type="button" class="btn btn-primary waves-effect waves-light">Primary</button> 

 <button type="button" class="btn btn-outline-secondary waves-effect waves-light">Secondary</button> 

 <button type="button" class="btn btn-outline-success waves-effect waves-light">Success</button> 

 <button type="button" class="btn btn-outline-info waves-effect waves-light">Info</button> 

 <button type="button" class="btn btn-outline-warning waves-effect waves-light">Warning</button> 

 <button type="button" class="btn btn-outline-danger waves-effect waves-light">Danger</button> 

 <button type="button" class="btn btn-outline-dark waves-effect waves-light">Dark</button> 

 <button type="button" class="btn btn-outline-light waves-effect">Light</button> 

 <!-- Rounded Buttons -->
<button type="button" class="btn rounded-pill btn-primary waves-effect waves-light">Primary</button> 

 <button type="button" class="btn rounded-pill btn-secondary waves-effect waves-light">Secondary</button> 

 <button type="button" class="btn rounded-pill btn-success waves-effect waves-light">Success</button> 

 <button type="button" class="btn rounded-pill btn-info waves-effect waves-light">Info</button> 

 <button type="button" class="btn rounded-pill btn-warning waves-effect waves-light">Warning</button> 

 <button type="button" class="btn rounded-pill btn-danger waves-effect waves-light">Danger</button> 

 <button type="button" class="btn rounded-pill btn-dark waves-effect waves-light">Dark</button> 

 <button type="button" class="btn rounded-pill btn-light waves-effect">Light</button> 

 <!-- Soft Buttons -->
<button type="button" class="btn btn-soft-primary waves-effect waves-light">Primary</button> 

 <button type="button" class="btn btn-soft-secondary waves-effect">secondary</button> 

 <button type="button" class="btn btn-soft-success waves-effect waves-light">Success</button> 

 <button type="button" class="btn btn-soft-info waves-effect waves-light">Info</button> 

 <button type="button" class="btn btn-soft-warning waves-effect waves-light">Warning</button> 

 <button type="button" class="btn btn-soft-danger waves-effect waves-light">Danger</button> 

 <button type="button" class="btn btn-soft-dark waves-effect waves-light">Dark</button> 

 <!-- ghost Buttons -->
<button type="button" class="btn btn-ghost-primary waves-effect waves-light">Primary</button> 

 <button type="button" class="btn btn-ghost-secondary waves-effect">secondary</button> 

 <button type="button" class="btn btn-ghost-success waves-effect waves-light">Success</button> 

 <button type="button" class="btn btn-ghost-info waves-effect waves-light">Info</button> 

 <button type="button" class="btn btn-ghost-warning waves-effect waves-light">Warning</button> 

 <button type="button" class="btn btn-ghost-danger waves-effect waves-light">Danger</button> 

 <button type="button" class="btn btn-ghost-dark waves-effect waves-light">Dark</button> 

 <!-- Gradient Buttons -->
<button type="button" class="btn btn-primary bg-gradient waves-effect waves-light">Primary</button> 

 <button type="button" class="btn btn-secondary bg-gradient waves-effect waves-light">Secondary</button> 

 <button type="button" class="btn btn-success bg-gradient waves-effect waves-light">Success</button> 

 <button type="button" class="btn btn-info bg-gradient waves-effect waves-light">Info</button> 

 <button type="button" class="btn btn-warning bg-gradient waves-effect waves-light">Warning</button> 

 <button type="button" class="btn btn-danger bg-gradient waves-effect waves-light">Danger</button> 

 <button type="button" class="btn btn-dark bg-gradient waves-effect waves-light">Dark</button> 

 <button type="button" class="btn btn-light bg-gradient waves-effect waves-light">Light</button> 

 <!-- Animation Buttons -->
<button type="button" class="btn btn-primary btn-animation waves-effect waves-light" data-text="Primary"><span>Primary</span></button> 

 <button type="button" class="btn btn-secondary btn-animation waves-effect waves-light" data-text="Secondary"><span>Secondary</span></button> 

 <button type="button" class="btn btn-success btn-animation waves-effect waves-light" data-text="Success"><span>Success</span></button> 

 <button type="button" class="btn btn-info btn-animation waves-effect waves-light" data-text="Info"><span>Info</span></button> 

 <button type="button" class="btn btn-warning btn-animation waves-effect waves-light" data-text="Warning"><span>Warning</span></button> 

 <button type="button" class="btn btn-danger btn-animation waves-effect waves-light" data-text="Danger"><span>Danger</span></button> 

 <button type="button" class="btn btn-dark btn-animation waves-effect waves-light" data-text="Dark"><span>Dark</span></button> 

 <!-- Buttons with Label -->
<button type="button" class="btn btn-primary btn-label waves-effect waves-light"><i class="ri-user-smile-line label-icon align-middle fs-16 me-2"></i> Primary</button> 

 <button type="button" class="btn btn-success btn-label waves-effect waves-light"><i class="ri-check-double-line label-icon align-middle fs-16 me-2"></i> Success</button> 

 <button type="button" class="btn btn-warning btn-label waves-effect waves-light"><i class="ri-error-warning-line label-icon align-middle fs-16 me-2"></i> Warning</button> 

 <!-- Rounded with Label -->
<button type="button" class="btn btn-primary btn-label waves-effect waves-light rounded-pill"><i class="ri-user-smile-line label-icon align-middle rounded-pill fs-16 me-2"></i> Primary</button> 
    
 <button type="button" class="btn btn-success btn-label waves-effect waves-light rounded-pill"><i class="ri-check-double-line label-icon align-middle rounded-pill fs-16 me-2"></i> Success</button> 

 <button type="button" class="btn btn-warning btn-label waves-effect waves-light rounded-pill"><i class="ri-error-warning-line label-icon align-middle rounded-pill fs-16 me-2"></i> Warning</button> 

 <!-- Buttons with Label Right -->
<button type="button" class="btn btn-primary btn-label waves-effect right waves-light"><i class="ri-user-smile-line label-icon align-middle fs-16 ms-2"></i> Primary</button> 

 <button type="button" class="btn btn-success btn-label waves-effect right waves-light rounded-pill"><i class="ri-check-double-line label-icon align-middle rounded-pill fs-16 ms-2"></i> Success</button> 

 <!-- Load More Buttons -->
<div class="hstack flex-wrap gap-2 mb-3 mb-lg-0">
    <button class="btn btn-outline-primary btn-load">
        <span class="d-flex align-items-center">
            <span class="spinner-border flex-shrink-0" role="status">
                <span class="visually-hidden">Loading...</span>
            </span>
            <span class="flex-grow-1 ms-2">
                Loading...
            </span>
        </span>
    </button>
    <button type="button" class="btn btn-success btn-load">
        <span class="d-flex align-items-center">
            <span class="spinner-border flex-shrink-0" role="status">
                <span class="visually-hidden">Loading...</span>
            </span>
            <span class="flex-grow-1 ms-2">
                Loading...
            </span>
        </span>
    </button>
    <button type="button" class="btn btn-outline-secondary btn-load">
        <span class="d-flex align-items-center">
            <span class="spinner-grow flex-shrink-0" role="status">
                <span class="visually-hidden">Loading...</span>
            </span>
            <span class="flex-grow-1 ms-2">
                Loading...
            </span>
        </span>
    </button>
    <button type="button" class="btn btn-danger btn-load">
        <span class="d-flex align-items-center">
            <span class="spinner-grow flex-shrink-0" role="status">
                <span class="visually-hidden">Loading...</span>
            </span>
            <span class="flex-grow-1 ms-2">
                Loading...
            </span>
        </span>
    </button>
</div> 

 <div class="d-flex flex-wrap gap-2 mb-3 mb-lg-0">
    <button class="btn btn-outline-primary btn-load">
        <span class="d-flex align-items-center">
            <span class="flex-grow-1 me-2">
                Loading...
            </span>
            <span class="spinner-border flex-shrink-0" role="status">
                <span class="visually-hidden">Loading...</span>
            </span>
        </span>
    </button>
    <button type="button" class="btn btn-success btn-load">
        <span class="d-flex align-items-center">
            <span class="flex-grow-1 me-2">
                Loading...
            </span>
            <span class="spinner-border flex-shrink-0" role="status">
                <span class="visually-hidden">Loading...</span>
            </span>
        </span>
    </button>
    <button type="button" class="btn btn-outline-warning btn-load">
        <span class="d-flex align-items-center">
            <span class="flex-grow-1 me-2">
                Loading...
            </span>
            <span class="spinner-grow flex-shrink-0" role="status">
                <span class="visually-hidden">Loading...</span>
            </span>
        </span>
    </button>
    <button type="button" class="btn btn-info btn-load">
        <span class="d-flex align-items-center">
            <span class="flex-grow-1 me-2">
                Loading...
            </span>
            <span class="spinner-grow flex-shrink-0" role="status">
                <span class="visually-hidden">Loading...</span>
            </span>
        </span>
    </button>
</div> 

 <!-- Border Buttons -->
<div class="hstack flex-wrap gap-2 mb-3 mb-lg-0">
    <button class="btn btn-primary btn-border">Primary</button>
    <button class="btn btn-secondary btn-border">Secondary</button>
    <button class="btn btn-success btn-border">Success</button>
    <button class="btn btn-warning btn-border">Warning</button>
    <button class="btn btn-danger btn-border">Danger</button>
</div> 

 <div class="hstack flex-wrap gap-2 mb-3 mb-lg-0">
    <button class="btn btn-outline-primary btn-border">Primary</button>
    <button class="btn btn-outline-secondary btn-border">Secondary</button>
    <button class="btn btn-outline-success btn-border">Success</button>
    <button class="btn btn-soft-warning btn-border">Warning</button>
    <button class="btn btn-soft-danger btn-border">Danger</button>
    <button class="btn btn-soft-dark btn-border">Dark</button>
</div> 

 <!-- Custom Toggle Buttons -->
<button type="button" class="btn btn-primary custom-toggle active" data-bs-toggle="button">
    <span class="icon-on"><i class="ri-alarm-line align-bottom"></i> Active</span>
    <span class="icon-off">Unactive</span>
</button> 

 <button type="button" class="btn btn-secondary custom-toggle active" data-bs-toggle="button">
    <span class="icon-on"><i class="ri-user-add-line align-bottom me-1"></i> Connect</span>
    <span class="icon-off"><i class="ri-check-fill align-bottom me-1"></i> Unconnect</span>
</button> 

 <button type="button" class="btn btn-success custom-toggle" data-bs-toggle="button">
    <span class="icon-on"><i class="ri-thumb-up-line align-bottom me-1"></i> Yes</span>
    <span class="icon-off"><i class="ri-thumb-down-line align-bottom me-1"></i> No</span>
</button> 

 <button type="button" class="btn btn-warning custom-toggle active" data-bs-toggle="button">
    <span class="icon-on"><i class="ri-add-line align-bottom me-1"></i> Follow</span>
    <span class="icon-off"><i class="ri-user-unfollow-line align-bottom me-1"></i> Unfollow</span>
</button> 

 <button type="button" class="btn btn-danger custom-toggle" data-bs-toggle="button">
    <span class="icon-on">On</span>
    <span class="icon-off">Off</span>
</button> 

 <button type="button" class="btn btn-dark custom-toggle" data-bs-toggle="button">
    <span class="icon-on"><i class="ri-bookmark-line align-bottom me-1"></i> Bookmark</span>
    <span class="icon-off"><i class="ri-bookmark-3-fill align-bottom me-1"></i> Unbookmark</span>
</button> 

 <button type="button" class="btn btn-outline-primary custom-toggle" data-bs-toggle="button">
    <span class="icon-on">Active</span>
    <span class="icon-off">Unactive</span>
</button> 

 <button type="button" class="btn btn-outline-secondary custom-toggle" data-bs-toggle="button">
    <span class="icon-on"><i class="ri-add-line align-bottom me-1"></i> Follow</span>
    <span class="icon-off"><i class="ri-user-unfollow-line align-bottom me-1"></i> Unfollow</span>
</button> 

 <button type="button" class="btn btn-outline-success custom-toggle active" data-bs-toggle="button">
    <span class="icon-on">On</span>
    <span class="icon-off">Off</span>
</button> 

 <button type="button" class="btn btn-soft-warning custom-toggle active" data-bs-toggle="button">
    <span class="icon-on">Follow</span>
    <span class="icon-off">Unfollow</span>
</button> 

 <button type="button" class="btn btn-soft-danger custom-toggle" data-bs-toggle="button">
    <span class="icon-on">On</span>
    <span class="icon-off">Off</span>
</button> 

 <button type="button" class="btn btn-dark custom-toggle active" data-bs-toggle="button">
    <span class="icon-on"><i class="ri-bookmark-line align-bottom"></i></span>
    <span class="icon-off"><i class="ri-bookmark-3-fill align-bottom"></i></span>
</button> 

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

 <button type="button" class="btn btn-light btn-lg">Large button</button> 

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

 <button type="button" class="btn btn-light btn-sm">Small button</button> 

 <!-- Width Button -->
<button type="button" class="btn btn-primary w-xs waves-effect waves-light">Xs</button> 

 <button type="button" class="btn btn-danger w-sm waves-effect waves-light">Small</button> 

 <button type="button" class="btn btn-warning w-md waves-effect waves-light">Medium</button> 

 <button type="button" class="btn btn-success w-lg waves-effect waves-light">Large</button> 

 <!-- Tag Button -->
<a class="btn btn-primary waves-effect waves-light" href="#" role="button">Link</a> 

 <button class="btn btn-success waves-effect waves-light" type="submit">Button</button> 

 <input class="btn btn-info" type="button" value="Input"> 

 <input class="btn btn-danger" type="submit" value="Submit"> 

 <input class="btn btn-warning" type="reset" value="Reset"> 

 <button type="button" class="btn">Base class</button> 

 <button type="button" class="btn btn-primary" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
    Custom button
</button> 

 <!-- Toggle Button Status -->
<button type="button" class="btn btn-primary waves-effect waves-light" data-bs-toggle="button" aria-pressed="false">
    Single toggle
</button> 

 <!-- Buttons Grid -->
<div class="d-grid gap-2" >
    <button class="btn btn-primary" type="button">Button</button>
    <button class="btn btn-primary" type="button">Button</button>
</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-primary" for="btncheck1">Checkbox 1</label>
    
    <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
    <label class="btn btn-primary" for="btncheck2">Checkbox 2</label>
    
    <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
    <label class="btn btn-primary" for="btncheck3">Checkbox 3</label>
</div> 

 <!-- Radio 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-secondary" for="btnradio1">Radio 1</label>

    <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
    <label class="btn btn-outline-secondary" for="btnradio2">Radio 2</label>

    <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
    <label class="btn btn-outline-secondary" for="btnradio3">Radio 3</label>
</div> 

 <!-- Buttons Group -->
<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 mt-4 mt-md-0" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-light"><i class="ri-align-right"></i></button>
    <button type="button" class="btn btn-light"><i class="ri-align-center"></i></button>
    <button type="button" class="btn btn-light"><i class="ri-align-left"></i></button>
</div> 

 <!-- Buttons Group -->
<button type="button" class="btn btn-primary waves-effect waves-light"><i class="ri-map-pin-line"></i></button> 
 <button type="button" class="btn btn-danger btn-icon waves-effect waves-light"><i class="ri-delete-bin-5-line"></i></button> 
 <button type="button" class="btn btn-success btn-icon waves-effect waves-light"><i class="ri-check-double-line"></i></button> 
 <button type="button" class="btn btn-light btn-icon waves-effect"><i class="ri-brush-2-fill"></i></button> 

 <button type="button" class="btn btn-outline-primary btn-icon waves-effect waves-light"><i class="ri-24-hours-fill"></i></button> 
 <button type="button" class="btn btn-outline-danger btn-icon waves-effect waves-light"><i class="ri-customer-service-2-line"></i></button> 
 <button type="button" class="btn btn-outline-success btn-icon waves-effect waves-light"><i class="ri-mail-send-line"></i></button> 
 <button type="button" class="btn btn-outline-warning btn-icon waves-effect waves-light"><i class="ri-menu-2-line"></i></button> 

 <!-- Buttons Toolbar -->
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group me-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-light">1</button>
        <button type="button" class="btn btn-light">2</button>
        <button type="button" class="btn btn-light">3</button>
        <button type="button" class="btn btn-light">4</button>
    </div>
    <div class="btn-group me-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-light">5</button>
        <button type="button" class="btn btn-light">6</button>
        <button type="button" class="btn btn-light">7</button>
    </div>
    <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-light">8</button>
    </div>
</div> 

 <!-- Group Buttons Sizing -->
<div class="btn-group btn-group-lg" 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 mt-2" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-light">Left</button>
    <button type="button" class="btn btn-light">Middle</button>
    <button type="button" class="btn btn-light">Right</button>
</div> 

 <div class="btn-group btn-group-sm mt-2" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-secondary">Left</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-secondary">Right</button>
</div> 

 <!-- Vertical Variation -->
<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 id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
        </button>
        <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
        </ul>
    </div>
</div> 

 <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
    <button type="button" class="btn btn-light">Button</button>
    <div class="btn-group" role="group">
        <button id="btnGroupVerticalDrop1" type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>
        <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
            <a class="dropdown-item" href="#">Dropdown link</a>
            <a class="dropdown-item" href="#">Dropdown link</a>
        </div>
    </div>
    <button type="button" class="btn btn-light">Button</button>
    <button type="button" class="btn btn-light">Button</button>
</div> 

 <div class="btn-group-vertical" role="group" aria-label="Vertical radio toggle button group">
    <input type="radio" class="btn-check" name="vbtn" id="vbtn-radio1" checked="">
    <label class="btn btn-outline-secondary" for="vbtn-radio1">Radio 1</label>
    <input type="radio" class="btn-check" name="vbtn" id="vbtn-radio2">
    <label class="btn btn-outline-secondary" for="vbtn-radio2">Radio 2</label>
    <input type="radio" class="btn-check" name="vbtn" id="vbtn-radio3">
    <label class="btn btn-outline-secondary" for="vbtn-radio3">Radio 3</label>
</div> 

 <a href="#!" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2">
    Focus ring
</a> 

 <!--custom focus ring color-->
    <a href="#!" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--vz-focus-ring-color: rgba(118, 93, 255, .25)">
    Custom focus ring
</a> 

 <!---custom blurry offset focus ring-->
    <a href="#!" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--vz-focus-ring-x: 10px; --vz-focus-ring-y: 10px; --vz-focus-ring-blur: 4px">
    Blurry offset focus ring
</a> 

 <p><a href="#" class="d-inline-flex focus-ring focus-ring-primary py-1 px-2 text-decoration-none border rounded-2">Primary focus</a></p> 

 <p><a href="#" class="d-inline-flex focus-ring focus-ring-secondary py-1 px-2 text-decoration-none border rounded-2">Secondary focus</a></p> 

 <p><a href="#" class="d-inline-flex focus-ring focus-ring-success py-1 px-2 text-decoration-none border rounded-2">Success focus</a></p> 

 <p><a href="#" class="d-inline-flex focus-ring focus-ring-danger py-1 px-2 text-decoration-none border rounded-2">Danger focus</a></p> 

 <p><a href="#" class="d-inline-flex focus-ring focus-ring-warning py-1 px-2 text-decoration-none border rounded-2">Warning focus</a></p> 

 <p><a href="#" class="d-inline-flex focus-ring focus-ring-info py-1 px-2 text-decoration-none border rounded-2">Info focus</a></p> 

 <p><a href="#" class="d-inline-flex focus-ring focus-ring-light py-1 px-2 text-decoration-none border rounded-2">Light focus</a></p> 

 <p><a href="#" class="d-inline-flex focus-ring focus-ring-dark py-1 px-2 text-decoration-none border rounded-2">Dark focus</a></p> /pre>