Components
Button Group
Group related buttons together in a cohesive, connected layout.
Installation
Usage
import { ButtonGroup } from "@/registry/core/button-group";
export default () => (
<ButtonGroup>
<button>Day</button>
<button>Week</button>
<button>Month</button>
</ButtonGroup>
);Examples
Variants
<ButtonGroup variant="primary">
<button>Option 1</button>
<button>Option 2</button>
<button>Option 3</button>
</ButtonGroup>
<ButtonGroup variant="secondary">
<button>Option 1</button>
<button>Option 2</button>
<button>Option 3</button>
</ButtonGroup>Sizes
<ButtonGroup size="sm">
<button>Small</button>
<button>Group</button>
</ButtonGroup>
<ButtonGroup size="md">
<button>Medium</button>
<button>Group</button>
</ButtonGroup>
<ButtonGroup size="lg">
<button>Large</button>
<button>Group</button>
</ButtonGroup>API Reference
ButtonGroup
Extends div element props.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'primary', 'secondary' | 'primary' | Visual style variant |
size | 'sm', 'md', 'lg' | 'md' | Button group size |
className | string | - | Additional CSS classes |
children | React.ReactNode | - | Button elements |
Notes
- Use standard
<button>elements as children for proper styling - The first and last buttons automatically receive rounded corners
- Buttons are separated with dividers that match the variant color
- Hover states are automatically applied to all buttons
- All buttons share consistent padding and sizing based on the size prop