button-group Component
Button Group System
Basic Button Groups
Preview
Code
Copy
<div class="space-y-3">
<div class="button-group">
<button class="button">Left</button>
<button class="button">Center</button>
<button class="button">Right</button>
</div>
<div class="button-group">
<button class="button">First</button>
<button class="button">Second</button>
<button class="button">Third</button>
<button class="button">Fourth</button>
</div>
</div>
Button Group Sizes
Preview
Code
Copy
<div class="space-y-3">
<div class="button-group tiny">
<button class="button">Tiny</button>
<button class="button">Button</button>
<button class="button">Group</button>
</div>
<div class="button-group small">
<button class="button">Small</button>
<button class="button">Button</button>
<button class="button">Group</button>
</div>
<div class="button-group">
<button class="button">Default</button>
<button class="button">Button</button>
<button class="button">Group</button>
</div>
<div class="button-group large">
<button class="button">Large</button>
<button class="button">Button</button>
<button class="button">Group</button>
</div>
<div class="button-group big">
<button class="button">Big</button>
<button class="button">Button</button>
<button class="button">Group</button>
</div>
</div>
Button Group Colors
Preview
Code
Copy
<div class="space-y-3">
<div class="button-group">
<button class="button">Default</button>
<button class="button">Button</button>
<button class="button">Group</button>
</div>
<div class="button-group primary">
<button class="button">Primary</button>
<button class="button">Button</button>
<button class="button">Group</button>
</div>
<div class="button-group positive">
<button class="button">Positive</button>
<button class="button">Button</button>
<button class="button">Group</button>
</div>
<div class="button-group negative">
<button class="button">Negative</button>
<button class="button">Button</button>
<button class="button">Group</button>
</div>
<div class="button-group warning">
<button class="button">Warning</button>
<button class="button">Button</button>
<button class="button">Group</button>
</div>
<div class="button-group info">
<button class="button">Info</button>
<button class="button">Button</button>
<button class="button">Group</button>
</div>
</div>
Icon Navigation Groups
Preview
Code
Copy
<div class="flex gap-3 flex-wrap items-center">
<div class="button-group navigation">
<button class="button icon">
<i class="icon arrow-left-s-line w-4 h-4"></i>
</button>
<button class="button icon">
<i class="icon arrow-right-s-line w-4 h-4"></i>
</button>
</div>
<div class="button-group navigation primary">
<button class="button icon">
<i class="icon chevron-left w-4 h-4"></i>
</button>
<button class="button icon">
<i class="icon chevron-right w-4 h-4"></i>
</button>
</div>
<div class="button-group navigation positive">
<button class="button icon">
<i class="icon arrow-up w-4 h-4"></i>
</button>
<button class="button icon">
<i class="icon arrow-down w-4 h-4"></i>
</button>
</div>
</div>
Separated Button Groups
Preview
Code
Copy
<div class="space-y-3">
<div class="button-group separated">
<button class="button">First</button>
<button class="button">Second</button>
<button class="button">Third</button>
</div>
<div class="button-group separated primary">
<button class="button">Save</button>
<button class="button">Save & Exit</button>
<button class="button">Cancel</button>
</div>
<div class="button-group separated positive">
<button class="button icon">
<i class="icon check w-4 h-4"></i>
</button>
<button class="button icon">
<i class="icon copy w-4 h-4"></i>
</button>
<button class="button icon">
<i class="icon download w-4 h-4"></i>
</button>
</div>
</div>
Toggle Button Groups
Preview
Code
Copy
<div class="space-y-3">
<div class="button-group toggle">
<button class="button active">Day</button>
<button class="button">Week</button>
<button class="button">Month</button>
<button class="button">Year</button>
</div>
<div class="button-group toggle primary">
<button class="button">List</button>
<button class="button active">Grid</button>
<button class="button">Cards</button>
</div>
<div class="button-group toggle small">
<button class="button active">All</button>
<button class="button">Active</button>
<button class="button">Draft</button>
<button class="button">Archived</button>
</div>
</div>
Toolbar Button Groups
Preview
Code
Copy
<div class="space-y-3">
<div class="button-group toolbar">
<button class="button icon">
<i class="icon bold w-4 h-4"></i>
</button>
<button class="button icon active">
<i class="icon italic w-4 h-4"></i>
</button>
<button class="button icon">
<i class="icon underline w-4 h-4"></i>
</button>
<button class="button icon">
<i class="icon strikethrough w-4 h-4"></i>
</button>
</div>
<div class="button-group toolbar">
<button class="button icon">
<i class="icon align-left w-4 h-4"></i>
</button>
<button class="button icon active">
<i class="icon align-center w-4 h-4"></i>
</button>
<button class="button icon">
<i class="icon align-right w-4 h-4"></i>
</button>
<button class="button icon">
<i class="icon align-justify w-4 h-4"></i>
</button>
</div>
</div>
Pagination Button Groups
Preview
Code
Copy
<div class="space-y-3">
<div class="button-group pagination">
<button class="button icon">
<i class="icon chevron-left w-4 h-4"></i>
</button>
<button class="button">1</button>
<button class="button active">2</button>
<button class="button">3</button>
<button class="button">4</button>
<button class="button">5</button>
<button class="button icon">
<i class="icon chevron-right w-4 h-4"></i>
</button>
</div>
<div class="button-group pagination small">
<button class="button">Previous</button>
<button class="button active">1</button>
<button class="button">2</button>
<button class="button">3</button>
<button class="button">Next</button>
</div>
</div>
Tab Button Groups
Preview
Code
Copy
<div class="space-y-3">
<div class="button-group tabs">
<button class="button active">Overview</button>
<button class="button">Details</button>
<button class="button">Settings</button>
<button class="button">History</button>
</div>
<div class="button-group tabs">
<button class="button">
<i class="icon home w-4 h-4 mr-1"></i>
Home
</button>
<button class="button active">
<i class="icon user w-4 h-4 mr-1"></i>
Profile
</button>
<button class="button">
<i class="icon settings w-4 h-4 mr-1"></i>
Settings
</button>
</div>
</div>
Outline Button Groups
Preview
Code
Copy
<div class="space-y-3">
<div class="button-group">
<button class="button outline">First</button>
<button class="button outline">Second</button>
<button class="button outline">Third</button>
</div>
<div class="button-group primary">
<button class="button outline">Primary</button>
<button class="button outline">Outline</button>
<button class="button outline">Group</button>
</div>
<div class="button-group positive">
<button class="button outline">
<i class="icon check w-4 h-4 mr-1"></i>
Accept
</button>
<button class="button outline">
<i class="icon x w-4 h-4 mr-1"></i>
Reject
</button>
</div>
</div>
Mixed Content Button Groups
Preview
Code
Copy
<div class="space-y-3">
<div class="button-group">
<button class="button icon">
<i class="icon arrow-left-line w-4 h-4"></i>
</button>
<button class="button">Back to List</button>
</div>
<div class="button-group positive">
<button class="button">
<i class="icon check-line w-4 h-4 mr-1"></i>
Save Changes
</button>
<button class="button icon">
<i class="icon arrow-down-s-line w-4 h-4"></i>
</button>
</div>
<div class="button-group primary">
<button class="button">
<i class="icon download w-4 h-4 mr-1"></i>
Export
</button>
<button class="button icon">
<i class="icon more-vertical w-4 h-4"></i>
</button>
</div>
</div>
Vertical Button Groups
Preview
Code
Copy
<div class="flex gap-4">
<div class="button-group vertical">
<button class="button">Top</button>
<button class="button">Middle</button>
<button class="button">Bottom</button>
</div>
<div class="button-group vertical separated">
<button class="button">Option 1</button>
<button class="button">Option 2</button>
<button class="button">Option 3</button>
<button class="button">Option 4</button>
</div>
<div class="button-group vertical primary">
<button class="button icon">
<i class="icon chevron-up w-4 h-4"></i>
</button>
<button class="button">Center</button>
<button class="button icon">
<i class="icon chevron-down w-4 h-4"></i>
</button>
</div>
</div>
Fluid Width Button Groups
Preview
Code
Copy
<div class="space-y-3">
<div class="button-group fluid">
<button class="button">Equal</button>
<button class="button">Width</button>
<button class="button">Buttons</button>
</div>
<div class="button-group fluid primary">
<button class="button">Save</button>
<button class="button">Cancel</button>
</div>
<div class="button-group fluid separated positive">
<button class="button">Yes</button>
<button class="button">No</button>
<button class="button">Maybe</button>
</div>
</div>
Stepper Button Groups
Preview
Code
Copy
<div class="space-y-3">
<div class="button-group stepper">
<button class="button completed">1</button>
<button class="button completed">2</button>
<button class="button active">3</button>
<button class="button">4</button>
<button class="button">5</button>
</div>
<div class="button-group stepper small">
<button class="button completed">
<i class="icon check w-3 h-3"></i>
</button>
<button class="button completed">
<i class="icon check w-3 h-3"></i>
</button>
<button class="button active">3</button>
<button class="button">4</button>
</div>
</div>
Compact Button Groups
Preview
Code
Copy
<div class="flex gap-3 flex-wrap items-center">
<div class="button-group compact">
<button class="button">XS</button>
<button class="button">S</button>
<button class="button">M</button>
<button class="button">L</button>
<button class="button">XL</button>
</div>
<div class="button-group compact primary">
<button class="button">10</button>
<button class="button active">25</button>
<button class="button">50</button>
<button class="button">100</button>
</div>
</div>
Loading States
Preview
Code
Copy
<div class="space-y-3">
<div class="button-group">
<button class="button loading">Loading</button>
<button class="button">Normal</button>
<button class="button">Normal</button>
</div>
<div class="button-group primary">
<button class="button">Save</button>
<button class="button loading">Processing</button>
</div>
</div>
Disabled States
Preview
Code
Copy
<div class="space-y-3">
<div class="button-group">
<button class="button" disabled>Disabled</button>
<button class="button">Enabled</button>
<button class="button" disabled>Disabled</button>
</div>
<div class="button-group primary">
<button class="button">Active</button>
<button class="button" disabled>Inactive</button>
<button class="button">Active</button>
</div>
</div>
Button Group Class API Reference
| Type | Class Options | Usage | Notes |
|---|---|---|---|
| Base | button-group |
Container for grouped buttons | Required base class |
| Layout | separated |
Adds gaps between buttons | Buttons have individual borders |
vertical |
Stack buttons vertically | Changes to column layout | |
fluid |
Full width with equal sizing | Buttons stretch to fill container | |
| Size | tiny |
Extra small size | Inherits to all child buttons |
small |
Small size | Inherits to all child buttons | |
| (default) | Medium size | No class needed | |
large |
Large size | Inherits to all child buttons | |
big |
Extra large size | Inherits to all child buttons | |
| Types | navigation |
Icon-only navigation | For prev/next controls |
toggle |
Radio-style selection | Use with active class | |
toolbar |
Editor toolbar style | Gray background container | |
pagination |
Page navigation | Numeric pagination style | |
tabs |
Tab navigation | Underline active style | |
stepper |
Step indicators | Use with completed/active | |
compact |
Reduced padding | Tighter button spacing | |
equal |
Equal width buttons | All buttons same width | |
| Colors | primary |
Primary theme color | Inherits to child buttons |
positive |
Success/confirm | Green color scheme | |
negative |
Danger/delete | Red color scheme | |
warning |
Caution/alert | Orange color scheme | |
info |
Informational | Blue color scheme | |
| + all extended colors | Additional colors | red, orange, yellow, etc. | |
| States | active |
Active button state | Applied to individual buttons |
completed |
Completed step | For stepper groups | |
disabled |
Disabled state | Applied to individual buttons |
Usage Examples
Basic Button Group
<div class="button-group">
<button class="button">Left</button>
<button class="button">Center</button>
<button class="button">Right</button>
</div>Navigation Controls
<div class="button-group navigation">
<button class="button icon">
<i class="icon arrow-left-s-line w-4 h-4"></i>
</button>
<button class="button icon">
<i class="icon arrow-right-s-line w-4 h-4"></i>
</button>
</div>Toggle Group
<div class="button-group toggle">
<button class="button active">Day</button>
<button class="button">Week</button>
<button class="button">Month</button>
<button class="button">Year</button>
</div>Toolbar
<div class="button-group toolbar">
<button class="button icon">
<i class="icon bold w-4 h-4"></i>
</button>
<button class="button icon active">
<i class="icon italic w-4 h-4"></i>
</button>
<button class="button icon">
<i class="icon underline w-4 h-4"></i>
</button>
</div>Pagination
<div class="button-group pagination">
<button class="button icon">
<i class="icon chevron-left w-4 h-4"></i>
</button>
<button class="button">1</button>
<button class="button active">2</button>
<button class="button">3</button>
<button class="button icon">
<i class="icon chevron-right w-4 h-4"></i>
</button>
</div>