ButtonGroup

ButtonGroup combines multiple related buttons into a single horizontal group with connected styling.

Import


import { ButtonGroup, ButtonGroupItem } from "@raydenui/ui";

Usage

Basic


<ButtonGroup>
  <ButtonGroupItem>Left</ButtonGroupItem>
  <ButtonGroupItem>Center</ButtonGroupItem>
  <ButtonGroupItem>Right</ButtonGroupItem>
</ButtonGroup>

With Active State


const [active, setActive] = useState("center");
 
<ButtonGroup>
  <ButtonGroupItem active={active === "left"} onClick={() => setActive("left")}>
    Left
  </ButtonGroupItem>
  <ButtonGroupItem active={active === "center"} onClick={() => setActive("center")}>
    Center
  </ButtonGroupItem>
  <ButtonGroupItem active={active === "right"} onClick={() => setActive("right")}>
    Right
  </ButtonGroupItem>
</ButtonGroup>;

With Icons


import { Icon } from "@raydenui/ui";
 
<ButtonGroup>
  <ButtonGroupItem icon={<Icon name="list" />} active>
    List
  </ButtonGroupItem>
  <ButtonGroupItem icon={<Icon name="grid" />}>Grid</ButtonGroupItem>
</ButtonGroup>;

Props

ButtonGroup

Prop	Type	Default	Description
`children`	`ReactNode`	—	ButtonGroupItem children
`className`	`string`	—	Additional CSS classes

ButtonGroupItem

Prop	Type	Default	Description
`active`	`boolean`	`false`	Active/selected state
`icon`	`ReactNode`	—	Optional icon
`disabled`	`boolean`	`false`	Disables the button
`onClick`	`() => void`	—	Click handler
`className`	`string`	—	Additional CSS classes

Accessibility

Uses role="group" for proper grouping
Individual buttons maintain focus management
Active state communicated via aria-pressed