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