Skip to Content
ComponentsInputButtonGroup

ButtonGroup

Joins child buttons visually. size / variant set on the group apply to children that don’t set their own; disabled disables the whole group.

import { ButtonGroup, Button } from '@gg-software/ui';
 
<ButtonGroup label="Text alignment">
    <Button>Left</Button>
    <Button>Center</Button>
    <Button>Right</Button>
</ButtonGroup>
 
<ButtonGroup orientation="vertical" size="sm">
    <Button>Top</Button>
    <Button>Middle</Button>
    <Button>Bottom</Button>
</ButtonGroup>

Props

PropTypeDefaultDescription
children*ReactNode—content rendered inside the component
orientation"horizontal" | "vertical"horizontal
size"sm" | "md" | "lg"—size applied to child buttons that don't set their own
variant"default" | "primary" | "text" | "dashed" | "link"—variant applied to child buttons that don't set their own
disabledbooleanfalsedisable every button in the group
labelstring—accessible label for the group (role="group")
classNamestring—

* required · generated from packages/ui/src/input/ButtonGroup/ButtonGroup.tsx

IconButtonTextInput