Use this template’s custom FAB button styles for actions in forms, dialogs, and more with support for
multiple sizes, states, and more.
Read the official
Bootstrap Documentation
for a full list of instructions and other options.
Bootstrap includes several predefined FAB button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
<button type="button" class="btn rounded-pill btn-icon btn-primary mb-1 waves-effect"><span class="tf-icons ri-add-line"></span></button>
<button type="button" class="btn rounded-pill btn-icon btn-secondary mb-1 waves-effect"><span class="tf-icons ri-add-line"></span></button>
<button type="button" class="btn rounded-pill btn-icon btn-success mb-1 waves-effect"><span class="tf-icons ri-add-line"></span></button>
<button type="button" class="btn rounded-pill btn-icon btn-danger mb-1 waves-effect"><span class="tf-icons ri-add-line"></span></button>
<button type="button" class="btn rounded-pill btn-icon btn-warning mb-1 waves-effect"><span class="tf-icons ri-add-line"></span></button>
<button type="button" class="btn rounded-pill btn-icon btn-info mb-1 waves-effect"><span class="tf-icons ri-add-line"></span></button>
<button type="button" class="btn rounded-pill btn-icon btn-dark mb-1 waves-effect"><span class="tf-icons ri-add-line"></span></button>| Class | Value |
|---|---|
class="btn rounded-pill btn-{value}"
|
primary | secondary | success | danger | warning | info | dark |
In need of a FAB button, but with light background colors? Replace the default modifier classes with the
.btn-label-*.
<button type="button" class="btn rounded-pill btn-icon btn-label-primary mb-1 waves-effect"><span class="tf-icons ri-add-line"></span></button>
<button type="button" class="btn rounded-pill btn-icon btn-label-secondary mb-1 waves-effect"><span class="tf-icons ri-add-line"></span></button>
<button type="button" class="btn rounded-pill btn-icon btn-label-success mb-1 waves-effect"><span class="tf-icons ri-add-line"></span></button>
<button type="button" class="btn rounded-pill btn-icon btn-label-danger mb-1 waves-effect"><span class="tf-icons ri-add-line"></span></button>
<button type="button" class="btn rounded-pill btn-icon btn-label-warning mb-1 waves-effect"><span class="tf-icons ri-add-line"></span></button>
<button type="button" class="btn rounded-pill btn-icon btn-label-info mb-1 waves-effect"><span class="tf-icons ri-add-line"></span></button>
<button type="button" class="btn rounded-pill btn-icon btn-label-dark mb-1 waves-effect"><span class="tf-icons ri-add-line"></span></button>| Class | Value |
|---|---|
class="btn rounded-pill btn-label-{value}"
|
primary | secondary | success | danger | warning | info | dark |
In need of a FAB button, but not the hefty background colors they bring? Replace the default modifier
classes with the
.btn-outline-* ones to remove all background images and colors on
any button.
<button type="button" class="btn rounded-pill btn-icon btn-outline-primary waves-effect"><span class="tf-icons ri-add-line"></span></button>
<button type="button" class="btn rounded-pill btn-icon btn-outline-secondary waves-effect"><span class="tf-icons ri-add-line"></span></button>
<button type="button" class="btn rounded-pill btn-icon btn-outline-success waves-effect"><span class="tf-icons ri-add-line"></span></button>
<button type="button" class="btn rounded-pill btn-icon btn-outline-danger waves-effect"><span class="tf-icons ri-add-line"></span></button>
<button type="button" class="btn rounded-pill btn-icon btn-outline-warning waves-effect"><span class="tf-icons ri-add-line"></span></button>
<button type="button" class="btn rounded-pill btn-icon btn-outline-info waves-effect"><span class="tf-icons ri-add-line"></span></button>
<button type="button" class="btn rounded-pill btn-icon btn-outline-dark waves-effect"><span class="tf-icons ri-add-line"></span></button>| Class | Value |
|---|---|
class="btn rounded-pill btn-outline-{value}"
|
primary | secondary | success | danger | warning | info | dark |
In need of a button, but not the hefty background and border colors they bring? Replace the default
modifier classes with the
.btn-text-* ones to remove all background images and colors on
any button.
<button type="button" class="btn rounded-pill btn-icon btn-text-primary waves-effect waves-light"><span class="tf-icons ri-add-line"></span></button>
<button type="button" class="btn rounded-pill btn-icon btn-text-secondary waves-effect waves-light"><span class="tf-icons ri-add-line"></span></button>
<button type="button" class="btn rounded-pill btn-icon btn-text-success waves-effect waves-light"><span class="tf-icons ri-add-line"></span></button>
<button type="button" class="btn rounded-pill btn-icon btn-text-danger waves-effect waves-light"><span class="tf-icons ri-add-line"></span></button>
<button type="button" class="btn rounded-pill btn-icon btn-text-warning waves-effect waves-light"><span class="tf-icons ri-add-line"></span></button>
<button type="button" class="btn rounded-pill btn-icon btn-text-info waves-effect waves-light"><span class="tf-icons ri-add-line"></span></button>
<button type="button" class="btn rounded-pill btn-icon btn-text-dark waves-effect waves-light"><span class="tf-icons ri-add-line"></span></button>| Class | Value |
|---|---|
class="btn rounded-pill btn-text-{value}"
|
primary | secondary | success | danger | warning | info | dark |
The following is the FAB (Floating Action Button) type with text. This button type combines the prominent, eye-catching design of a floating action button with the added clarity of a text label. By utilizing the FAB with text, you can provide users with a highly visible and easily accessible action button that also offers a clear description of its function.
<!-- basic -->
<button type="button" class="btn rounded-pill btn-icon btn-primary waves-effect fab-with-text">
<span class="tf-icons ri-add-line me-1"></span>Base
</button>
<button type="button" class="btn rounded-pill btn-icon btn-secondary waves-effect fab-with-text">
<span class="tf-icons ri-add-line me-1"></span>Base
</button>
<button type="button" class="btn rounded-pill btn-icon btn-success waves-effect fab-with-text">
<span class="tf-icons ri-add-line me-1"></span>Base
</button>
<button type="button" class="btn rounded-pill btn-icon btn-danger waves-effect fab-with-text">
<span class="tf-icons ri-add-line me-1"></span>Base
</button>
<button type="button" class="btn rounded-pill btn-icon btn-warning waves-effect fab-with-text">
<span class="tf-icons ri-add-line me-1"></span>Base
</button>
<button type="button" class="btn rounded-pill btn-icon btn-info waves-effect fab-with-text">
<span class="tf-icons ri-add-line me-1"></span>Base
</button>
<button type="button" class="btn rounded-pill btn-icon btn-dark waves-effect fab-with-text">
<span class="tf-icons ri-add-line me-1"></span>Base
</button>
<!-- label -->
<button type="button" class="btn rounded-pill btn-icon btn-label-primary waves-effect fab-with-text">
<span class="tf-icons ri-add-line me-1"></span>Base
</button>
<button type="button" class="btn rounded-pill btn-icon btn-label-secondary waves-effect fab-with-text">
<span class="tf-icons ri-add-line me-1"></span>Base
</button>
<button type="button" class="btn rounded-pill btn-icon btn-label-success waves-effect fab-with-text">
<span class="tf-icons ri-add-line me-1"></span>Base
</button>
<button type="button" class="btn rounded-pill btn-icon btn-label-danger waves-effect fab-with-text">
<span class="tf-icons ri-add-line me-1"></span>Base
</button>
<button type="button" class="btn rounded-pill btn-icon btn-label-warning waves-effect fab-with-text">
<span class="tf-icons ri-add-line me-1"></span>Base
</button>
<button type="button" class="btn rounded-pill btn-icon btn-label-info waves-effect fab-with-text">
<span class="tf-icons ri-add-line me-1"></span>Base
</button>
<button type="button" class="btn rounded-pill btn-icon btn-label-dark waves-effect fab-with-text">
<span class="tf-icons ri-add-line me-1"></span>Base
</button>
<!-- outline -->
<button type="button" class="btn rounded-pill btn-icon btn-outline-primary waves-effect fab-with-text">
<span class="tf-icons ri-add-line me-1"></span>Base
</button>
<button type="button" class="btn rounded-pill btn-icon btn-outline-secondary waves-effect fab-with-text">
<span class="tf-icons ri-add-line me-1"></span>Base
</button>
<button type="button" class="btn rounded-pill btn-icon btn-outline-success waves-effect fab-with-text">
<span class="tf-icons ri-add-line me-1"></span>Base
</button>
<button type="button" class="btn rounded-pill btn-icon btn-outline-danger waves-effect fab-with-text">
<span class="tf-icons ri-add-line me-1"></span>Base
</button>
<button type="button" class="btn rounded-pill btn-icon btn-outline-warning waves-effect fab-with-text">
<span class="tf-icons ri-add-line me-1"></span>Base
</button>
<button type="button" class="btn rounded-pill btn-icon btn-outline-info waves-effect fab-with-text">
<span class="tf-icons ri-add-line me-1"></span>Base
</button>
<button type="button" class="btn rounded-pill btn-icon btn-outline-dark waves-effect fab-with-text">
<span class="tf-icons ri-add-line me-1"></span>Base
</button>
<!-- text & icon only -->
<button type="button" class="btn rounded-pill btn-icon btn-text-primary waves-effect fab-with-text">
<span class="tf-icons ri-add-line me-1"></span>Base
</button>
<button type="button" class="btn rounded-pill btn-icon btn-text-secondary waves-effect fab-with-text">
<span class="tf-icons ri-add-line me-1"></span>Base
</button>
<button type="button" class="btn rounded-pill btn-icon btn-text-success waves-effect fab-with-text">
<span class="tf-icons ri-add-line me-1"></span>Base
</button>
<button type="button" class="btn rounded-pill btn-icon btn-text-danger waves-effect fab-with-text">
<span class="tf-icons ri-add-line me-1"></span>Base
</button>
<button type="button" class="btn rounded-pill btn-icon btn-text-warning waves-effect fab-with-text">
<span class="tf-icons ri-add-line me-1"></span>Base
</button>
<button type="button" class="btn rounded-pill btn-icon btn-text-info waves-effect fab-with-text">
<span class="tf-icons ri-add-line me-1"></span>Base
</button>
<button type="button" class="btn rounded-pill btn-icon btn-text-dark waves-effect fab-with-text">
<span class="tf-icons ri-add-line me-1"></span>Base
</button>