Synto - Laravel Bootstrap 5 Premium Admin & Dashboard Template

Default Template Buttons

<div class="btn-list">
            <button type="button" class="btn btn-primary btn-wave">Primary</button>
            <button type="button" class="btn btn-secondary btn-wave">Secondary</button>
            <button type="button" class="btn btn-success btn-wave">Success</button>
            <button type="button" class="btn btn-danger btn-wave">Danger</button>
            <button type="button" class="btn btn-warning btn-wave">Warning</button>
            <button type="button" class="btn btn-info btn-wave">Info</button>
            <button type="button" class="btn btn-light btn-wave">Light</button>
            <button type="button" class="btn btn-dark btn-wave text-white">Dark</button>
        </div>

Rounded Template Buttons

<div class="btn-list">
            <button type="button" class="btn btn-primary rounded-pill btn-wave">Primary</button>
            <button type="button" class="btn btn-secondary rounded-pill btn-wave">Secondary</button>
            <button type="button" class="btn btn-success rounded-pill btn-wave">Success</button>
            <button type="button" class="btn btn-danger rounded-pill btn-wave">Danger</button>
            <button type="button" class="btn btn-warning rounded-pill btn-wave">Warning</button>
            <button type="button" class="btn btn-info rounded-pill btn-wave">Info</button>
            <button type="button" class="btn btn-light rounded-pill btn-wave">Light</button>
            <button type="button" class="btn btn-dark rounded-pill btn-wave text-white">Dark</button>
        </div>

Template Outline Buttons

<div class="btn-list">
            <button type="button" class="btn btn-outline-primary btn-wave">Primary</button>
            <button type="button" class="btn btn-outline-secondary btn-wave">Secondary</button>
            <button type="button" class="btn btn-outline-success btn-wave">Success</button>
            <button type="button" class="btn btn-outline-danger btn-wave">Danger</button>
            <button type="button" class="btn btn-outline-warning btn-wave">Warning</button>
            <button type="button" class="btn btn-outline-info btn-wave">Info</button>
            <button type="button" class="btn btn-outline-light btn-wave">Light</button>
            <button type="button" class="btn btn-outline-dark btn-wave">Dark</button>
        </div>

Rounded Template Outline Buttons

<div class="btn-list">
            <button type="button" class="btn btn-outline-primary rounded-pill btn-wave">Primary</button>
            <button type="button" class="btn btn-outline-secondary rounded-pill btn-wave">Secondary</button>
            <button type="button" class="btn btn-outline-success rounded-pill btn-wave">Success</button>
            <button type="button" class="btn btn-outline-danger rounded-pill btn-wave">Danger</button>
            <button type="button" class="btn btn-outline-warning rounded-pill btn-wave">Warning</button>
            <button type="button" class="btn btn-outline-info rounded-pill btn-wave">Info</button>
            <button type="button" class="btn btn-outline-light rounded-pill btn-wave">Light</button>
            <button type="button" class="btn btn-outline-dark rounded-pill btn-wave">Dark</button>
        </div>

Light Buttons

<div class="btn-list">
            <button type="button" class="btn btn-primary-light btn-wave">Primary</button>
            <button type="button" class="btn btn-secondary-light btn-wave">Secondary</button>
            <button type="button" class="btn btn-success-light btn-wave">Success</button>
            <button type="button" class="btn btn-danger-light btn-wave">Danger</button>
            <button type="button" class="btn btn-warning-light btn-wave">Warning</button>
            <button type="button" class="btn btn-info-light btn-wave">Info</button>
            <button type="button" class="btn btn-purple-light btn-wave">purple</button>
            <button type="button" class="btn btn-teal-light btn-wave">teal</button>
            <button type="button" class="btn btn-orange-light btn-wave">orange</button>
        </div>

Light Rounded Buttons

<div class="btn-list">
            <button type="button" class="btn btn-primary-light rounded-pill btn-wave">Primary</button>
            <button type="button" class="btn btn-secondary-light rounded-pill btn-wave">Secondary</button>
            <button type="button" class="btn btn-success-light rounded-pill btn-wave">Success</button>
            <button type="button" class="btn btn-danger-light rounded-pill btn-wave">Danger</button>
            <button type="button" class="btn btn-warning-light rounded-pill btn-wave">Warning</button>
            <button type="button" class="btn btn-info-light rounded-pill btn-wave">Info</button>
            <button type="button" class="btn btn-purple-light rounded-pill btn-wave">purple</button>
            <button type="button" class="btn btn-teal-light rounded-pill btn-wave">teal</button>
            <button type="button" class="btn btn-orange-light rounded-pill btn-wave">orange</button>
        </div>

Gradient Buttons

<div class="btn-list">
            <button type="button" class="btn btn-primary-gradient btn-wave">Primary</button>
            <button type="button" class="btn btn-secondary-gradient btn-wave">Secondary</button>
            <button type="button" class="btn btn-success-gradient btn-wave">Success</button>
            <button type="button" class="btn btn-danger-gradient btn-wave">Danger</button>
            <button type="button" class="btn btn-warning-gradient btn-wave">Warning</button>
            <button type="button" class="btn btn-info-gradient btn-wave">Info</button>
            <button type="button" class="btn btn-orange-gradient btn-wave">Orange</button>
            <button type="button" class="btn btn-purple-gradient btn-wave">Purple</button>
            <button type="button" class="btn btn-teal-gradient btn-wave">Teal</button>
        </div>

Rounded Gradient Buttons

<div class="btn-list">
            <button type="button" class="btn btn-primary-gradient rounded-pill btn-wave">Primary</button>
            <button type="button" class="btn btn-secondary-gradient rounded-pill btn-wave">Secondary</button>
            <button type="button" class="btn btn-success-gradient rounded-pill btn-wave">Success</button>
            <button type="button" class="btn btn-danger-gradient rounded-pill btn-wave">Danger</button>
            <button type="button" class="btn btn-warning-gradient rounded-pill btn-wave">Warning</button>
            <button type="button" class="btn btn-info-gradient rounded-pill btn-wave">Info</button>
            <button type="button" class="btn btn-orange-gradient rounded-pill btn-wave">Orange</button>
            <button type="button" class="btn btn-purple-gradient rounded-pill btn-wave">Purple</button>
            <button type="button" class="btn btn-teal-gradient rounded-pill btn-wave">Teal</button>
        </div>

Ghost Buttons

<div class="btn-list">
            <button type="button" class="btn btn-primary-ghost btn-wave">Primary</button>
            <button type="button" class="btn btn-secondary-ghost btn-wave">Secondary</button>
            <button type="button" class="btn btn-success-ghost btn-wave">Success</button>
            <button type="button" class="btn btn-danger-ghost btn-wave">Danger</button>
            <button type="button" class="btn btn-warning-ghost btn-wave">Warning</button>
            <button type="button" class="btn btn-info-ghost btn-wave">Info</button>
            <button type="button" class="btn btn-orange-ghost btn-wave">Orange</button>
            <button type="button" class="btn btn-purple-ghost btn-wave">Purple</button>
            <button type="button" class="btn btn-teal-ghost btn-wave">Teal</button>
        </div>

Button tags

Link

<div class="btn-list">
            <a class="btn btn-primary btn-wave" href="javascript:void(0);" role="button">Link</a>
            <button class="btn btn-secondary btn-wave" type="submit">Button</button>
            <input class="btn btn-info" type="button" value="Input">
            <input class="btn btn-warning" type="submit" value="Submit">
            <input class="btn btn-success" type="reset" value="Reset">
        </div>

disabled state with anchor tags

Primary link Link

<div class="btn-list">
            <div class="mb-4">
                <button type="button" class="btn btn-primary" disabled="">Primary
                    button</button>
                <button type="button" class="btn btn-secondary" disabled="">Button</button>
                <button type="button" class="btn btn-outline-primary" disabled="">Primary
                    button</button>
                <button type="button" class="btn btn-outline-secondary" disabled="">Button</button>
            </div>

            <div>
                <a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary
                    link</a>
                <a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>
            </div>
        </div>

button plugin toggle states

Toggle link Active toggle link Disabled toggle link

<div class="btn-list">
            <div class="mb-4">
                <button type="button" class="btn btn-primary btn-wave" data-bs-toggle="button"
                    >Toggle button</button>
                <button type="button" class="btn btn-secondary active btn-wave" data-bs-toggle="button"
                    aria-pressed="true">Active toggle button</button>
                <button type="button" class="btn btn-teal btn-wave" disabled data-bs-toggle="button"
                    >Disabled toggle
                    button</button>
            </div>
            <div>
                <a href="javascript:void(0);" class="btn btn-primary btn-wave" role="button" data-bs-toggle="button">Toggle
                    link</a>
                <a href="javascript:void(0);" class="btn btn-secondary active btn-wave" role="button" data-bs-toggle="button"
                    aria-pressed="true">Active toggle link</a>
                <a class="btn btn-teal disabled btn-wave" aria-disabled="true" role="button"
                    data-bs-toggle="button">Disabled toggle link</a>
            </div>
        </div>

Link functionally caveat

Primary link Link

<div class="btn-list">
            <a class="btn btn-primary disabled" tabindex="-1" role="button"
                aria-disabled="true">Primary link</a>
            <a class="btn btn-secondary disabled" tabindex="-1" role="button"
                aria-disabled="true">Link</a>
        </div>

Loading Buttons

<div class="btn-list d-md-flex flex-wrap">
            <button class="btn btn-primary btn-loader">
                <span class="me-2">Loading</span>
                <span class="loading"><i class="ri-loader-2-fill fs-16"></i></span>
            </button>
            <button class="btn btn-outline-secondary btn-loader">
                <span class="me-2">Loading</span>
                <span class="loading"><i class="ri-loader-2-fill fs-16"></i></span>
            </button>
            <button class="btn btn-info-transparent btn-loader">
                <span class="me-2">Loading</span>
                <span class="loading"><i class="ri-loader-4-line fs-16"></i></span>
            </button>
            <button class="btn btn-warning-transparent btn-loader">
                <span class="me-2">Loading</span>
                <span class="loading"><i class="ri-loader-5-line fs-16"></i></span>
            </button>
            <button class="btn btn-success btn-loader disabled">
                <span class="me-2">Disabled</span>
                <span class="loading"><i class="ri-refresh-line fs-16"></i></span>
            </button>
        </div>

Icon Buttons

<div class="btn-list d-md-flex d-block">
            <div class="mb-md-0 mb-2">
                <button class="btn btn-icon btn-primary btn-wave">
                    <i class="ri-bank-fill"></i>
                </button>
                <button class="btn btn-icon btn-info btn-wave">
                    <i class="ri-medal-line"></i>
                </button>
                <button class="btn btn-icon btn-danger btn-wave">
                    <i class="ri-archive-line"></i>
                </button>
                <button class="btn btn-icon btn-warning btn-wave me-5">
                    <i class="ri-calendar-2-line"></i>
                </button>
            </div>
            <div class="mb-md-0 mb-2">
                <button class="btn btn-icon btn-primary-transparent rounded-pill btn-wave">
                    <i class="ri-home-smile-line"></i>
                </button>
                <button class="btn btn-icon btn-secondary-transparent rounded-pill btn-wave">
                    <i class="ri-delete-bin-line"></i>
                </button>
                <button class="btn btn-icon btn-success-transparent rounded-pill btn-wave">
                    <i class="ri-notification-3-line"></i>
                </button>
                <button class="btn btn-icon btn-danger-transparent rounded-pill btn-wave me-5">
                    <i class="ri-chat-settings-line"></i>
                </button>
            </div>
            <div class="">
                <button class="btn btn-icon btn-outline-primary rounded-pill btn-wave">
                    <i class="ri-phone-line"></i>
                </button>
                <button class="btn btn-icon btn-outline-teal rounded-pill btn-wave">
                    <i class="ri-customer-service-2-line"></i>
                </button>
                <button class="btn btn-icon btn-outline-success rounded-pill btn-wave">
                    <i class="ri-live-line"></i>
                </button>
                <button class="btn btn-icon btn-outline-secondary rounded-pill btn-wave">
                    <i class="ri-save-line"></i>
                </button>
            </div>
        </div>

Social Buttons

<div class="btn-list">
            <button class="btn btn-icon btn-facebook btn-wave">
                <i class="ri-facebook-line"></i>
            </button>
            <button class="btn btn-icon btn-twitter btn-wave">
                <i class="ri-twitter-x-line"></i>
            </button>
            <button class="btn btn-icon btn-instagram btn-wave">
                <i class="ri-instagram-line"></i>
            </button>
            <button class="btn btn-icon btn-github btn-wave">
                <i class="ri-github-line"></i>
            </button>
            <button class="btn btn-icon btn-youtube btn-wave">
                <i class="ri-youtube-line"></i>
            </button>
            <button class="btn btn-icon btn-google btn-wave">
                <i class="ri-google-line"></i>
            </button>
        </div>

Sizes

<div class="btn-list">
            <button type="button" class="btn btn-primary btn-sm btn-wave">Small
                button</button>
            <button type="button" class="btn btn-secondary btn-wave">Default
                button</button>
            <button type="button" class="btn btn-success btn-lg btn-wave">Large
                button</button>
        </div>

Button Widths

<div class="btn-list">
            <button type="button" class="btn btn-primary btn-w-xs btn-wave">XS</button>
            <button type="button" class="btn btn-secondary btn-w-sm btn-wave">SM</button>
            <button type="button" class="btn btn-warning btn-w-md btn-wave">MD</button>
            <button type="button" class="btn btn-info btn-w-lg btn-wave">LG</button>
        </div>

Buttons With Different Shadows

<div class="btn-list d-flex">
            <div class="me-5">
                <button class="btn btn-primary shadow-sm btn-wave">Button</button>
                <button class="btn btn-primary shadow btn-wave">Button</button>
                <button class="btn btn-primary shadow-lg btn-wave">Button</button>
            </div>
            <div>
                <button class="btn btn-secondary btn-sm shadow-sm btn-wave">Button</button>
                <button class="btn btn-info shadow btn-wave">Button</button>
                <button class="btn btn-lg btn-success shadow-lg btn-wave">Button</button>
            </div>
        </div>

Different Colored Buttons With Shadows

<div class="btn-list">
            <button class="btn btn-primary shadow-primary btn-wave">Button</button>
            <button class="btn btn-secondary shadow-secondary btn-wave">Button</button>
            <button class="btn btn-success shadow-success btn-wave">Button</button>
            <button class="btn btn-info shadow-info btn-wave">Button</button>
            <button class="btn btn-warning shadow-warning btn-wave">Button</button>
            <button class="btn btn-danger shadow-danger btn-wave">Button</button>
            <button class="btn btn-purple shadow-purple btn-wave">Button</button>
            <button class="btn btn-orange shadow-orange btn-wave">Button</button>
        </div>

Raised Buttons

<div class="btn-list">
            <button class="btn btn-primary btn-raised-shadow btn-wave">Button</button>
            <button class="btn btn-secondary btn-raised-shadow btn-wave">Button</button>
            <button class="btn btn-success btn-raised-shadow btn-wave">Button</button>
            <button class="btn btn-info btn-raised-shadow btn-wave">Button</button>
            <button class="btn btn-warning btn-raised-shadow btn-wave">Button</button>
            <button class="btn btn-danger btn-raised-shadow btn-wave">Button</button>
            <button class="btn btn-purple btn-raised-shadow btn-wave">Button</button>
            <button class="btn btn-orange btn-raised-shadow btn-wave">Button</button>
        </div>

Label Buttons

<div class="btn-list">
            <button class="btn btn-primary label-btn">
                <i class="ri-chat-smile-line label-btn-icon me-2"></i>
                Primary
            </button>
            <button class="btn btn-secondary label-btn">
                <i class="ri-settings-4-line label-btn-icon me-2"></i>
                Secondary
            </button>
            <button class="btn btn-warning label-btn rounded-pill">
                <i class="ri-spam-2-line label-btn-icon me-2 rounded-pill"></i>
                Warning
            </button>
            <button class="btn btn-info label-btn rounded-pill">
                <i class="ri-phone-line label-btn-icon me-2 rounded-pill"></i>
                Info
            </button>
            <button class="btn btn-success label-btn label-end">
                Success
                <i class="ri-thumb-up-line label-btn-icon ms-2"></i>
            </button>
            <button class="btn btn-danger label-btn label-end rounded-pill">
                Cancel
                <i class="ri-close-line label-btn-icon ms-2 rounded-pill"></i>
            </button>
        </div>

Custom Buttons

<div class="btn-list">
            <button class="btn btn-info custom-button rounded-pill">
                <span class="custom-btn-icons"><i class="ri-twitter-x-line text-info"></i></span>
                Twitter
            </button>
            <button class="btn btn-teal-light btn-border-down">Border</button>
            <button class="btn btn-secondary-light btn-border-start">Border</button>
            <button class="btn btn-purple-light btn-border-end">Border</button>
            <button class="btn btn-warning-light btn-border-top">Border</button>
            <button class="btn btn-secondary btn-glare"><span>Glare Button</span></button>
            <button class="btn btn-danger btn-hover btn-hover-animate">Like</button>
            <button class="btn btn-success btn-darken-hover">Hover</button>
            <button class="btn btn-orange btn-custom-border">Hover</button>
        </div>

Block buttons

<div class="btn-list">
            <div class="d-grid gap-2 mb-4">
                <button class="btn btn-primary btn-wave" type="button">Button</button>
                <button class="btn btn-secondary btn-wave" type="button">Button</button>
            </div>
            <div class="d-grid gap-2 d-md-block">
                <button class="btn btn-info btn-wave" type="button">Button</button>
                <button class="btn btn-success btn-wave" type="button">Button</button>
            </div>
            <div class="d-grid gap-2 col-6 mx-auto">
                <button class="btn btn-danger btn-wave" type="button">Button</button>
                <button class="btn btn-warning btn-wave" type="button">Button</button>
            </div>
            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                <button class="btn btn-teal me-md-2 btn-wave" type="button">Button</button>
                <button class="btn btn-purple btn-wave" type="button">Button</button>
            </div>
        </div>

Basic example

<div class="btn-group" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-info btn-wave"><i class="bi bi-skip-backward"></i></button>
            <button type="button" class="btn btn-info btn-wave"><i class="bi bi-pause"></i></button>
            <button type="button" class="btn btn-info btn-wave"><i class="bi bi-skip-forward"></i></button>
        </div>

Navigation

Active link Link Link

<div class="btn-group">
            <a href="javascript:void(0);" class="btn btn-primary active btn-wave" aria-current="page">Active
                link</a>
            <a href="javascript:void(0);" class="btn btn-primary">Link</a>
            <a href="javascript:void(0);" class="btn btn-primary">Link</a>
        </div>

Mixed style

<div class="btn-group" role="group" aria-label="Basic mixed styles example">
            <button type="button" class="btn btn-danger btn-wave">Left</button>
            <button type="button" class="btn btn-warning btn-wave">Middle</button>
            <button type="button" class="btn btn-success btn-wave">Right</button>
        </div>

Outline styled

<div class="btn-group" role="group" aria-label="Basic outlined example">
            <button type="button" class="btn btn-outline-primary btn-wave">Left</button>
            <button type="button" class="btn btn-outline-primary btn-wave">Middle</button>
            <button type="button" class="btn btn-outline-primary btn-wave">Right</button>
        </div>

Checkbox button groups

Checkbox 1 Checkbox 2 Checkbox 3

<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
            <input type="checkbox" class="btn-check" id="btncheck1">
            <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>

            <input type="checkbox" class="btn-check" id="btncheck2">
            <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>

            <input type="checkbox" class="btn-check" id="btncheck3">
            <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
        </div>

Radio button groups

Radio 1 Radio 2 Radio 3

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
            <input type="radio" class="btn-check" name="btnradio" id="btnradio1"
                checked>
            <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

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

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

Sizing

<div class="btn-group btn-group-lg my-1" role="group" aria-label="Large button group">
            <button type="button" class="btn btn-outline-success">Left</button>
            <button type="button" class="btn btn-outline-success">Middle</button>
            <button type="button" class="btn btn-outline-success">Right</button>
        </div>
        <div class="btn-group my-1" role="group" aria-label="Default button group">
            <button type="button" class="btn btn-outline-success">Left</button>
            <button type="button" class="btn btn-outline-success">Middle</button>
            <button type="button" class="btn btn-outline-success">Right</button>
        </div>
        <div class="btn-group btn-group-sm my-1" role="group" aria-label="Small button group">
            <button type="button" class="btn btn-outline-success">Left</button>
            <button type="button" class="btn btn-outline-success">Middle</button>
            <button type="button" class="btn btn-outline-success">Right</button>
        </div>

Button toolbar

<div class="btn-toolbar mb-4" role="toolbar"
            aria-label="Toolbar with button groups">
            <div class="btn-group me-2 my-1" role="group" aria-label="First group">
                <button type="button" class="btn btn-primary">1</button>
                <button type="button" class="btn btn-primary">2</button>
                <button type="button" class="btn btn-primary">3</button>
                <button type="button" class="btn btn-primary">4</button>
            </div>
            <div class="btn-group me-2 my-1" role="group" aria-label="Second group">
                <button type="button" class="btn btn-secondary">5</button>
                <button type="button" class="btn btn-secondary">6</button>
                <button type="button" class="btn btn-secondary">7</button>
            </div>
            <div class="btn-group my-1" role="group" aria-label="Third group">
                <button type="button" class="btn btn-info">8</button>
            </div>
        </div>
        <div class="btn-toolbar mb-3" role="toolbar"
            aria-label="Toolbar with button groups">
            <div class="btn-group me-2 my-1" role="group" aria-label="First group">
                <button type="button" class="btn btn-outline-secondary">1</button>
                <button type="button" class="btn btn-outline-secondary">2</button>
                <button type="button" class="btn btn-outline-secondary">3</button>
                <button type="button" class="btn btn-outline-secondary">4</button>
            </div>
            <div class="input-group">
                <div class="input-group-text" id="btnGroupAddon">@</div>
                <input type="text" class="form-control"
                    placeholder="Input group example"
                    aria-label="Input group example"
                    aria-describedby="btnGroupAddon">
            </div>
        </div>
        <div class="btn-toolbar justify-content-between d-sm-flex d-block" role="toolbar"
            aria-label="Toolbar with button groups">
            <div class="btn-group my-1" role="group" aria-label="First group">
                <button type="button" class="btn btn-outline-secondary">1</button>
                <button type="button" class="btn btn-outline-secondary">2</button>
                <button type="button" class="btn btn-outline-secondary">3</button>
                <button type="button" class="btn btn-outline-secondary">4</button>
            </div>
            <div class="input-group">
                <div class="input-group-text" id="btnGroupAddon2">@</div>
                <input type="text" class="form-control"
                    placeholder="Input group example"
                    aria-label="Input group example"
                    aria-describedby="btnGroupAddon2">
            </div>
        </div>

Nesting

<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="javascript:void(0);">Dropdown link</a></li>
                    <li><a class="dropdown-item" href="javascript:void(0);">Dropdown link</a></li>
                </ul>
            </div>
        </div>

Vertical variation

Radio 1 Radio 2 Radio 3

<div class="row gap-2">
            <div class="col-sm-3">
                <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
                    <button type="button" class="btn btn-primary">Button</button>
                    <button type="button" class="btn btn-primary">Button</button>
                    <div class="btn-group" role="group">
                        <button id="btnGroupVerticalDrop1" type="button"
                            class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            Dropdown
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
                            <li><a class="dropdown-item" href="javascript:void(0);">Dropdown link</a></li>
                            <li><a class="dropdown-item" href="javascript:void(0);">Dropdown link</a></li>
                        </ul>
                    </div>
                    <button type="button" class="btn btn-primary">Button</button>
                    <button type="button" class="btn btn-primary">Button</button>
                    <div class="btn-group" role="group">
                        <button id="btnGroupVerticalDrop2" type="button"
                            class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            Dropdown
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
                            <li><a class="dropdown-item" href="javascript:void(0);">Dropdown link</a></li>
                            <li><a class="dropdown-item" href="javascript:void(0);">Dropdown link</a></li>
                        </ul>
                    </div>
                    <div class="btn-group" role="group">
                        <button id="btnGroupVerticalDrop3" type="button"
                            class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            Dropdown
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
                            <li><a class="dropdown-item" href="javascript:void(0);">Dropdown link</a></li>
                            <li><a class="dropdown-item" href="javascript:void(0);">Dropdown link</a></li>
                        </ul>
                    </div>
                    <div class="btn-group" role="group">
                        <button id="btnGroupVerticalDrop4" type="button"
                            class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            Dropdown
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
                            <li><a class="dropdown-item" href="javascript:void(0);">Dropdown link</a></li>
                            <li><a class="dropdown-item" href="javascript:void(0);">Dropdown link</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
                    <button type="button" class="btn btn-info">Button</button>
                    <button type="button" class="btn btn-info">Button</button>
                    <button type="button" class="btn btn-info">Button</button>
                    <button type="button" class="btn btn-info">Button</button>
                    <button type="button" class="btn btn-info">Button</button>
                    <button type="button" class="btn btn-info">Button</button>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="btn-group-vertical" role="group"
                    aria-label="Vertical radio toggle button group">
                    <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1"
                        checked="">
                    <label class="btn btn-outline-danger" for="vbtn-radio1">Radio 1</label>
                    <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2"
                    >
                    <label class="btn btn-outline-danger" for="vbtn-radio2">Radio 2</label>
                    <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3"
                    >
                    <label class="btn btn-outline-danger" for="vbtn-radio3">Radio 3</label>
                </div>
            </div>
        </div>

Social Group Buttons

<div class="btn-group" role="group" aria-label="Basic example">
            <button class="btn btn-icon btn-facebook btn-wave">
                <i class="ri-facebook-line"></i>
            </button>
            <button class="btn btn-icon btn-twitter btn-wave">
                <i class="ri-twitter-x-line"></i>
            </button>
            <button class="btn btn-icon btn-instagram btn-wave">
                <i class="ri-instagram-line"></i>
            </button>
            <button class="btn btn-icon btn-github btn-wave">
                <i class="ri-github-line"></i>
            </button>
            <button class="btn btn-icon btn-youtube btn-wave">
                <i class="ri-youtube-line"></i>
            </button>
            <button class="btn btn-icon btn-google btn-wave">
                <i class="ri-google-line"></i>
            </button>
        </div>

Switcher

Buttons