The following is the button group component included in this template. These button groups have been designed to provide a cohesive and user-friendly interface, making it easier for users to navigate and interact with your website. You can utilize these button groups to ensure a consistent and professional appearance across your site, enhancing the overall functionality and user experience.
The following is the basic button group type from the button group component. This basic button group has been designed to offer a simple and intuitive interface for users, allowing for easy navigation and interaction within your website. You can implement this basic button group to maintain a clean and professional look, ensuring that your site's functionality is both user-friendly and visually appealing.
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary waves-effect waves-light">Left</button>
<button type="button" class="btn btn-secondary waves-effect waves-light">Middle</button>
<button type="button" class="btn btn-secondary waves-effect waves-light">Right</button>
</div>| Class | Value |
|---|---|
class="btn btn-{value}"
|
primary | secondary | success | danger | warning | info | dark |
The following is the label button group type from the button group component. This label button group offers a distinct visual representation for categorizing and organizing buttons within your website. Implementing this feature can contribute to an improved user experience and overall usability of your website.
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-label-secondary waves-effect">Left</button>
<button type="button" class="btn btn-label-secondary waves-effect">Middle</button>
<button type="button" class="btn btn-label-secondary waves-effect">Right</button>
</div>| Class | Value |
|---|---|
class="btn btn-label-{value}"
|
primary | secondary | success | danger | warning | info | dark |
The following is the outline button group type from the button group component. This type of button group features outlined buttons, providing a subtle yet distinct visual differentiation from other button types.
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-secondary waves-effect">Left</button>
<button type="button" class="btn btn-outline-secondary waves-effect">Middle</button>
<button type="button" class="btn btn-outline-secondary waves-effect">Right</button>
</div>| Class | Value |
|---|---|
class="btn btn-outline-{value}"
|
primary | secondary | success | danger | warning | info | dark |
The following is the text button group type from the button group component. This type of button group features buttons with text-only labels, providing a minimalist and streamlined appearance for your website interface.
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-text-secondary waves-effect" fdprocessedid="v6mj2e">Left</button>
<button type="button" class="btn btn-text-secondary waves-effect" fdprocessedid="n6f7">Middle</button>
<button type="button" class="btn btn-text-secondary waves-effect" fdprocessedid="3ca46g">Right</button>
</div>| Class | Value |
|---|---|
class="btn btn-text-{value}"
|
primary | secondary | success | danger | warning | info | dark |
The following is the toolbar button group type from the button group component. This type of button group is specifically designed to mimic the functionality and appearance of a toolbar, typically found in applications or software interfaces. By using the toolbar button group, you can create a familiar and intuitive user experience, allowing users to quickly access and interact with essential functions or actions within your website. Implementing this type of button group can enhance the efficiency and usability of your interface, especially for tasks that require frequent user interaction.
<div class="btn-toolbar demo-inline-spacing" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-secondary waves-effect">
<i class="tf-icons mdi mdi-bell-outline"></i>
</button>
<button type="button" class="btn btn-outline-secondary waves-effect">
<i class="tf-icons mdi mdi-calendar-blank-outline"></i>
</button>
<button type="button" class="btn btn-outline-secondary waves-effect">
<i class="tf-icons mdi mdi-shield-check-outline"></i>
</button>
<button type="button" class="btn btn-outline-secondary waves-effect">
<i class="tf-icons mdi mdi-chat-processing-outline"></i>
</button>
</div>
<div class="btn-group" role="group" aria-label="Second group">
<button type="button" class="btn btn-outline-secondary waves-effect">
<i class="tf-icons mdi mdi-format-bold"></i>
</button>
<button type="button" class="btn btn-outline-secondary waves-effect">
<i class="tf-icons mdi mdi-format-italic"></i>
</button>
<button type="button" class="btn btn-outline-secondary waves-effect">
<i class="tf-icons mdi mdi-format-underline"></i>
</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-outline-secondary waves-effect">
<i class="tf-icons mdi mdi-volume-high"></i>
</button>
</div>
</div>The following is the nesting button group type from the button group component. This type of button group allows for buttons to be nested within other buttons or groups, providing a hierarchical structure for complex interfaces.
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-outline-secondary waves-effect" fdprocessedid="ij9ke">
<i class="tf-icons mdi mdi-car-outline"></i>
</button>
<button type="button" class="btn btn-outline-secondary waves-effect" fdprocessedid="3naj01">
<i class="tf-icons mdi mdi-rocket-launch-outline"></i>
</button>
<button type="button" class="btn btn-outline-secondary waves-effect" fdprocessedid="fmu7qj">
<i class="tf-icons mdi mdi-lightbulb-outline"></i>
</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-outline-secondary dropdown-toggle waves-effect" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" fdprocessedid="jezhnm">
<i class="mdi mdi-dots-vertical mdi-20px"></i><span class="d-none d-sm-block">Dropdown</span>
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item waves-effect" href="javascript:void(0);">Dropdown link</a>
<a class="dropdown-item waves-effect" href="javascript:void(0);">Dropdown link</a>
</div>
</div>
</div>Combine button-like checkbox and radio toggle buttons into a seamless looking button group.
<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><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>