Button Group - HapplyUI

A compound button group component with sizes, icons, and toggle group support via asChild.

Installation

bunx @happlyui/cli@latest add button-group

Dependencies

npm packages

@radix-ui/react-slot

Registry dependencies

These are automatically installed when you add this component.

tv
polymorphic
recursive-clone-children

Usage

import * as ButtonGroup from "@/components/ui/button-group"

<ButtonGroup.Root>
  <ButtonGroup.Item>
    <ButtonGroup.Icon as={GridIcon} />
    Grid view
  </ButtonGroup.Item>
  <ButtonGroup.Item>List view</ButtonGroup.Item>
</ButtonGroup.Root>

Examples

Default

A basic button group with icons and labels.

<ButtonGroup.Root>
  <ButtonGroup.Item>
    <ButtonGroup.Icon as={RiLayoutGridLine} />
    Grid view
  </ButtonGroup.Item>
  <ButtonGroup.Item>
    <ButtonGroup.Icon as={RiListCheck} />
    List view
  </ButtonGroup.Item>
  <ButtonGroup.Item>
    <ButtonGroup.Icon as={RiLayout2Line} />
    Gallery view
  </ButtonGroup.Item>
</ButtonGroup.Root>

Sizes

Button groups come in small (default), xsmall, and xxsmall sizes.

<ButtonGroup.Root size="small">...</ButtonGroup.Root>
<ButtonGroup.Root size="xsmall">...</ButtonGroup.Root>
<ButtonGroup.Root size="xxsmall">...</ButtonGroup.Root>

API Reference

ButtonGroup.Root

The container that groups items together with negative spacing.

Prop	Type	Default	Description
`size`	`'small' \| 'xsmall' \| 'xxsmall'`	`'small'`	The size of the button group items
`asChild`	`boolean`	`false`	Renders as child element using Radix Slot

ButtonGroup.Item

An individual button within the group. Supports active state via data-[state=on].

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Renders as child element using Radix Slot
`disabled`	`boolean`	`false`	Disables the button item

ButtonGroup.Icon

Polymorphic icon container that receives size from ButtonGroup.Root.

Prop	Type	Default	Description
`as`	`React.ElementType`	`'div'`	The element or component to render as