Button Group
A set of buttons grouped together in a single line with consistent styling and spacing.
Component Setup
Create or update your ButtonGroup component
Copy this code to create your ButtonGroup component
Test Your Component
- 1. Add the component to a test page
- 2. Check all props and variants work as expected
- 3. Verify responsive behavior
- 4. Test with different content/data
- 5. Ensure accessibility features work correctly
Sizes
Button groups are available in multiple sizes to fit different UI contexts.
Rounded Full
For a more modern look, you can use the rounded full variant which applies pill-shaped corners to the outer buttons.
Active State
Buttons within a group can be marked as active to indicate the current selection or state.
Disabled State
Individual buttons or the entire group can be disabled when certain actions are not available.
Examples
Here are some common usage examples of button groups in different contexts.
API Reference
The ButtonGroup component provides a way to group related buttons with consistent styling.
ButtonGroup.Root
Container element that holds and styles a group of related buttons.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default""stroke""lighter""ghost" | "default" | Visual style variant of the button group |
color | "blue""neutral""danger""success" | "blue" | Color theme of the button group |
size | "large""medium""small""x-small" | "medium" | Size of all buttons in the group |
roundedFull | "boolean" | "false" | Whether to use fully rounded corners (pill shape) |
disabled | "boolean" | "false" | Whether the entire button group is disabled |
ButtonGroup.Item
Individual button elements within the group with proper border styling.
| Prop | Type | Default | Description |
|---|---|---|---|
active | "boolean" | "false" | Whether this button is in active state |
disabled | "boolean" | "false" | Whether this specific button is disabled |
asChild | "boolean" | "false" | Whether to merge props onto child component |