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