Default Buttons
A basic example of Button Group.
Light Buttons
A Button Group consisting of light buttons styled with the
.btn-light class.
Sizes
To change the button group size to extra small, small, and large, use the classes
.btn-xs, .btn-sm and .btn-lg for buttons respectively.
<div class="btn-group">
<button class="btn btn-primary btn-xs">
Button 1
</button>
<button class="btn btn-primary btn-xs">
Button 2
</button>
<button class="btn btn-primary btn-xs">
Button 3
</button>
</div>
<div class="btn-group">
<button class="btn btn-primary btn-sm">
Button 1
</button>
<button class="btn btn-primary btn-sm">
Button 2
</button>
<button class="btn btn-primary btn-sm">
Button 3
</button>
</div>
<div class="btn-group">
<button class="btn btn-primary">
Button 1
</button>
<button class="btn btn-primary">
Button 2
</button>
<button class="btn btn-primary">
Button 3
</button>
</div>
<div class="btn-group">
<button class="btn btn-primary btn-lg">
Button 1
</button>
<button class="btn btn-primary btn-lg">
Button 2
</button>
<button class="btn btn-primary btn-lg">
Button 3
</button>
</div>
Source Code
The following source file manages the CSS styles of the Tailwind CSS Button Group component.
Upon building the assets using Webpack Build Tools,
the below file is compiled and added into the
dist/assets/css/styles.css bundle,
making it available globally across all pages.
| File | Description |
|---|---|
src/core/plugins/components/btn-group.js
|
The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS Button Group component. |
