Buttons

  1. Base UI
  2. Buttons

Default Buttons

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

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

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

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

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

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

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

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

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

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>

Custom Toggle Buttons

Example of toggle buttons.

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

Buttons Sizes

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

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

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

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

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

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

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

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

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

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

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

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

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