Button Group

Preview

Value: center

Installation

npx skeci-ui add button-group

Usage

import { ButtonGroup, ButtonGroupItem } from '@/components/ui/button-group';

<ButtonGroup defaultValue={["center"]}>
  <ButtonGroupItem value="left">Left</ButtonGroupItem>
  <ButtonGroupItem value="center">Center</ButtonGroupItem>
  <ButtonGroupItem value="right">Right</ButtonGroupItem>
</ButtonGroup>

Variants

Multiple Selection

Vertical Orientation

Sizes

Props

ButtonGroup

Prop	Type	Default	Description
`type`	`'single' \| 'multiple'`	`'single'`	Determines whether one or multiple items can be selected.
`defaultValue`	`string[]`	—	The initial selected values.
`onValueChange`	`(value: string[]) => void`	—	Event handler for when selection changes.
`variant`	`'outline' \| 'filled'`	`'outline'`	The visual style of the buttons.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	The size of the buttons.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	The orientation of the group.

ButtonGroupItem

Prop	Type	Default	Description
`value`	`string`	(required)	A unique value for the item.
`disabled`	`boolean`	`false`	Whether the item is disabled.