ButtonGroup & ButtonToggleGroup

Use the ButtonGroup component when you want to group buttons that perform an action.
Use the ButtonToggleGroup component when you want to group buttons that toggle a state.

ButtonGroup


<ButtonGroup 
    items={[
        { label: "Archive", leftIcon: Archive },
        { label: "Edit", leftIcon: Edit03 },
        { label: "Delete", leftIcon: Trash01 },
    ]} 
/>

Single Selection

<ButtonToggleGroup value={value} onValueChange={setValue} items={items} />

Multiple Selection

<ButtonToggleGroup type="multiple" value={values} onValueChange={setValues} items={items} />

Sizes

<ButtonToggleGroup size="sm" items={defaultItems} />
<ButtonToggleGroup size="md" items={defaultItems} />
<ButtonToggleGroup size="lg" items={defaultItems} />

Disabled

<ButtonToggleGroup value="" disabled items={[
        { value: "today", label: "Today" },
        { value: "tomorrow", label: "Tomorrow" },
        { value: "thisweek", label: "This week" },
    ]/>

API Reference

The ButtonToggleGroup component is built on Radix UI's ToggleGroup primitive. It inherits all of its props and behaviors.

Props	Type	Default	Description
value	string \| string[]	-	Selected value(s) for the ButtonToggleGroup.
onValueChange	(value: string \| string[]) => void	-	Callback when selection changes.
type?	"single" \| "multiple"	"single"	Single or multiple selection mode.
size?	"sm" \| "md" \| "lg"	"md"	Button size.
items?	ButtonToggleGroupItemProps[]	-	Array of items to render within the group.
disabled?	boolean	false	Disable the button or the entire group.
className?	string	-	additional class for the entire group.

ButtonToggleGroupItem

The ButtonToggleGroupItem component inherits all of its props and behaviors from Radix UI's ToggleGroupItem primitive.

Prop	Type	Description
value	string	The value of the toggle item.
leftIcon?	React.ComponentType<{ className?: string }> \| React.ReactNode	Icon to be rendered before the label.
rightIcon?	React.ComponentType<{ className?: string }> \| React.ReactNode	Icon to be rendered after the label.
label?	React.ReactNode	The content of the button.
disabled?	boolean	Disable the individual button item.
className?	string	additional class for the item.