Buttons & Actions

Button Group

Groups buttons and inputs into a single segmented control with shared borders.

Import

import { ButtonGroup, ButtonGroupText, ButtonGroupSeparator } from "@countryclub/ui-react";

Default

Split & Mixed Groups

Sat · 9:40 AM

Leading Icon

Pair each button label with a leading icon.

With Dot

A status dot in front of each label.

Disabled

Disabled Individual Item

Disable a single item while the rest stay interactive.

Selection

Single selection built with ToggleGroup — pressing an item unpresses the others.

Multiple Selection

Pass `multiple` to ToggleGroup so several items can stay pressed.