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>

Icons Only

Compact icon-only button group with px-3 py-2 (12 horizontal, 8 vertical) padding. Override the icon's default -mx-2 (which hugs an adjacent text label) so the icon sits centered in the padded area.

<ButtonGroup.Root>
  <ButtonGroup.Item className="px-3" aria-label="Bold">
    <ButtonGroup.Icon as={RiBold} className="mx-0" />
  </ButtonGroup.Item>
  <ButtonGroup.Item className="px-3" aria-label="Italic">
    <ButtonGroup.Icon as={RiItalic} className="mx-0" />
  </ButtonGroup.Item>
  <ButtonGroup.Item className="px-3" aria-label="Underline">
    <ButtonGroup.Icon as={RiUnderline} className="mx-0" />
  </ButtonGroup.Item>
</ButtonGroup.Root>

Text Only

Text-only button group with px-4 py-2 (16 horizontal, 8 vertical) padding — matches the default small variant.

<ButtonGroup.Root>
  <ButtonGroup.Item>Day</ButtonGroup.Item>
  <ButtonGroup.Item>Week</ButtonGroup.Item>
  <ButtonGroup.Item>Month</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