npm i @velkin/react
import { VuButtonGroup } from "@velkin/react/button-group";| Prop | Type | Default | Description |
|---|---|---|---|
| variant | VuButtonGroupVariant | "solid" | Visual treatment forwarded to children. Default: `"solid"`. |
| color | VuButtonGroupColor | "default" | Token intent forwarded to children. Default: `"default"`. |
| size | VuButtonGroupSize | "md" | Discrete size forwarded to children. Default: `"md"`. |
| radius | VuButtonGroupRadius | "md" | Corner preset (`none`/`sm`/`md`/`lg`/`full`). Default: `md`. |
| orientation | VuButtonGroupOrientation | "horizontal" | Layout axis. Default: `"horizontal"`. |
| disabled | boolean | false | Disables every child while set. Default: `false`. |
| label | string | "" | Accessible name for the group container. |
| selectionMode | VuButtonGroupSelectionMode | "none" | Selection model; HTML attribute is `selectionmode`. Default: `"none"`. |
| value | string | "" | Selected value when `selectionMode === "single"`. |
| values | string[] | [] | Selected values when `selectionMode === "multiple"`. |
| Event | Detail | Description |
|---|---|---|
| vu-change | VuButtonGroupChangeDetail | User toggled selection (not programmatic `value` / `values` writes). |
| Slot | Description |
|---|---|
| — | - Two or more cluster members. Supported: `<vu-button>` and `<vu-dropdown>` (the dropdown's `[slot="trigger"]` `<vu-button>` is the visual surface that gets the cluster's variant / color / size / radius forwarded to it). Other tags are ignored — wrap raw `<button>` / `<a>` in `<vu-button>` first. `<vu-dropdown>` members are skipped from selection (`value` / `values`) — they remain trigger-only. |
| Part | Description |
|---|---|
| base | The inner `[role="group"]` (or `[role="radiogroup"]`) container that wraps the slot. |
| Name | Definition |
|---|---|
| VuButtonGroupChangeDetail | |
| VuButtonGroupColor | |
| VuButtonGroupOrientation | |
| VuButtonGroupRadius | |
| VuButtonGroupSelectionMode | |
| VuButtonGroupSize | |
| VuButtonGroupVariant | |