Button Group
Visually group related buttons together with connected styling.
Basic Horizontal Groups
Group related buttons together horizontally with connected borders.
Simple Button Group
With Icons
Icon Only
Secondary Variant
Vertical Groups
Stack buttons vertically for sidebar-style navigation.
Vertical Navigation
With Separators
Add visual dividers between button sections using ButtonGroupSeparator.
Horizontal with Separator
Vertical with Separator
With Text Labels
Add text labels using ButtonGroupText for better context.
Labeled Actions
Nested Button Groups
Group button groups together with automatic spacing.
Email Actions Toolbar
Complex Integration
Combine ButtonGroup with other components like Dropdown Menus.
Email Actions Toolbar with Dropdown
Button Group with Popover
Integrate Popover components with ButtonGroup for rich interactive UIs.
Agent Tasks Popover
Button Group with Select
Combine Select dropdowns with Input and Button components for rich form controls.
Currency Converter
Usage Notes
Key Features
- Buttons are visually connected with shared borders
- Rounded corners only appear on the outer edges
- Focus states are properly managed with z-index
- Supports both horizontal and vertical orientations
- Can nest button groups for complex layouts
- Integrates with ButtonGroupText for labels
- Integrates with ButtonGroupSeparator for dividers
- Works seamlessly with DropdownMenu and Popover components
- Works with all button variants and sizes
Accessibility
- Uses proper role="group" for screen readers
- Icon-only buttons should have aria-label attributes
- Keyboard navigation works naturally (Tab/Shift+Tab)
- Focus states are clearly visible