Button Group
A row of secondary-style buttons fused into one control — shared border, radius/2lg and shadow/xs from the Button family, items divided by hairlines with only the outer corners rounded. For a segmented switcher with an animated thumb, reach for Segmented Control instead; the button group is the toolbar/filter flavor.
Installation
You can add this button group component using our CLI or manually:
The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.
npx boardui@latest add button-groupSelected item
selected keeps an item on its hover fill and sets aria-pressed — drive it from state for single or multi-select toolbars.
const [view, setView] = useState("list");
<ButtonGroup aria-label="View"> {views.map(({ id, label, icon }) => ( <ButtonGroupItem key={id} leadingIcon={icon} selected={view === id} onClick={() => setView(id)} > {label} </ButtonGroupItem> ))}</ButtonGroup>Icon only
iconOnly items collapse to squares — give each an aria-labelsince there's no visible text.
{/* Icon-only items are square — aria-label each one */}<ButtonGroup size="small" aria-label="Formatting"> <ButtonGroupItem iconOnly leadingIcon={RiBold} aria-label="Bold" /> <ButtonGroupItem iconOnly leadingIcon={RiItalic} aria-label="Italic" /> <ButtonGroupItem iconOnly leadingIcon={RiUnderline} aria-label="Underline" /></ButtonGroup>