Button Group
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.
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.
Nested Button Groups
Group button groups together with automatic spacing.
Complex Integration
Combine ButtonGroup with other components like Dropdown Menus.
Button Group with Popover
Integrate Popover components with ButtonGroup for rich interactive UIs.
Button Group with Select
Combine Select dropdowns with Input and Button components for rich form controls.
- 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
- Works with all button variants and sizes
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Orientation | ButtonGroupOrientation | Horizontal | Group orientation. Options: Horizontal, Vertical. |
| Class | string? | null | Additional CSS classes appended to the root element. |
| ChildContent | RenderFragment? | null | Button and other group elements. |