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:
Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.
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>