Button Group
Button groups combine related buttons together into a single component. They are useful for toolbars, segmented controls, and toggle groups.
Horizontal
Vertical
Icon Buttons
With Different Button Variants
Props
| Name | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Direction in which buttons are arranged |
children* | React.ReactNode | - | Button components to group together |
Usage Guidelines
When to use
- •For related actions that should be visually grouped
- •For segmented controls (like text alignment options)
- •For toolbars with multiple related actions
- •For toggle groups where one option is selected
Best practices
- •Use secondary or tertiary variants for button groups
- •Keep the number of buttons in a group reasonable (2-5 is ideal)
- •Use consistent button sizes within a group
- •Consider using icon buttons for compact toolbars
- •Use horizontal orientation by default, vertical for sidebar actions
Accessibility
- •Button groups have role="group" for screen readers
- •Each button can be navigated individually with keyboard
- •Focus states are preserved for each button
- •Consider adding aria-label to the group if its purpose isn't obvious
Do's and Don'ts
✓ Do
- •Use consistent button sizes within a group
- •Group related actions together logically
- •Use secondary or tertiary variants for grouped buttons
- •Keep groups to 2-5 buttons for clarity
- •Use icon-only buttons for compact toolbars
✗ Don't
- •Don't mix different button sizes in the same group
- •Don't group unrelated actions together
- •Don't use more than one primary button in a group
- •Don't create groups with too many buttons (over 5)
- •Don't mix text and icon-only buttons in the same group
Related Components
Button
Individual button component
Icon Button
Button with icon only, no text
Toolbar
Container for button groups and tools