A visual grouping wrapper that connects its children into a unified bar. Borders and rounded corners are automatically stripped from direct children — size is controlled on the children themselves.
Use ButtonBarItem to wrap components that need a normalised container (background, padding, vertical stretch).
Pass compact or small directly to the children — ButtonBar adapts to their height.
Any component with a styled outer element (Input, Select, etc.) works as a direct child — ButtonBar strips their border and rounding automatically.
To make the bar full-width and let a child grow to fill the remaining space, add class="flex w-full" to ButtonBar and class="flex-1" to the stretching child.
Wrap components without a standard control surface (Switch, Slider, ColorPicker…) in ButtonBarItem to give them a matching background and stretch to the bar's height.