#### Buttons

#### Default Buttons

Show Code

Use the`btn` class to show the default button style.

    <!-- 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

Show Code

Use `btn-outline-` class with the below-mentioned variation to create a button with the outline.

    <!-- 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

Show Code

Use the `rounded-pill` class to make a rounded 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

Show Code

Use `btn-soft-` class with the below-mentioned variation to create a button with the soft background.

    <!-- 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

Show Code

Use `btn-ghost-` class with the below-mentioned variation to create a button with the transparent background.

    <!-- 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

Show Code

Use `bg-gradient` class to create a gradient 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

Show Code

Use `bg-animation` class to create an animated 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

Show Code

Use `btn-label` class to create a button with the label.

Primary

    <!-- 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

Show Code

Example of loading buttons.

    <!-- 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

Show Code

Example of simple bottom borderd buttons.

    <!-- 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>

#### Buttons Sizes

Show Code

Use `btn-lg` class to create a large size button and `btn-sm` class to create a small size 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>

#### Buttons Width

Show Code

Use `w-xs,w-sm,w-md,w-lg` class to make different sized buttons respectively.

    <!-- 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>

#### Buttons Tag

Show Code

Use `btn` class with different HTML elements. (though some browsers may apply a slightly different rendering)

Link

    <!-- 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">

#### Buttons Toggle Status

Show Code

Use `data-bs-toggle="button"` to toggle a button’s active state.

    <!-- 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

Show Code

Use `d-grid` class to create a full-width block 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 & Radio Buttons

Show Code

Combine button-like `checkbox and radio` toggle buttons into a seamless looking button group.

Checkbox 1 Checkbox 2 Checkbox 3
Radio 1 Radio 2 Radio 3

    <!-- 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

Show Code

Use the `btn-group` class in the parent class to wrap a series of buttons.

    <!-- 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>

#### Icon Buttons

Show Code

Use `btn-icon` class to wrap icon in button

    <!-- 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

Show Code

Use `btn-toolbar` class to combine sets of button groups into more complex components.

    <!-- 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>

#### Button Group Sizing

Show Code

Use `btn-group-` class with the below-mentioned variation to set the different sizes of button groups.

    <!-- 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

Show Code

Make a set of buttons appear `vertically` stacked .Split button dropdowns are not supported here.

Radio 1 Radio 2 Radio 3

    <!-- 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>

##### Theme Customizer

###### Layout

Choose your layout

##### Vertical

##### Horizontal

##### Two Column

###### Color Scheme

Choose Light or Dark Scheme.

##### Light

##### Dark

###### Layout Width

Choose Fluid or Boxed layout.

##### Fluid

##### Boxed

###### Layout Position

Choose Fixed or Scrollable Layout Position.

Fixed Scrollable

###### Topbar Color

Choose Light or Dark Topbar Color.

##### Light

##### Dark