Button Group
Attached buttons with shared borders, optionally a segmented control with single or multiple selection.
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
selection | ButtonGroupSelection | none | `none` (default) for plain attached buttons, `single` for one pressed item, `multiple` for independent toggles. |
value | string | — | `value` of the pressed item; comma-separated values with `selection="multiple"`. Items without a `value` attribute use their index. |
disabled | boolean | false | Disables every item. |
orientation | ButtonGroupOrientation | horizontal | Stacks the items vertically. |
aria-label | string | — | Accessible name of the group. |
Events
| Name | Type | Description |
|---|---|---|
change | CustomEvent<{ value: string }> | Fired after the user changes the selection. `detail.value` is the new `value`. Not fired for programmatic changes. |
CSS custom properties
Grouped by the element and state they target. Click a group to collapse it; click a name to copy it.
| Name | Type | Default | Description |
|---|---|---|---|
--c2-button-group--gap | pixel | 0px | Space between items. Zero attaches them; a positive gap separates them into individually rounded buttons. |
--c2-button-group--border-radius | border-radius | 6px | Outside corner radius. With a positive gap, applies to every item. |
--c2-button-group--border | border | 1px solid transparent | Border applied to every item, e.g. `1px solid #d4d4d8` for an outlined group. |
--c2-button-group__divider--width | pixel | 1px | Width of the line between attached items; also how much their borders overlap. |
--c2-button-group__divider--color | color | rgba(255, 255, 255, 0.35) | Colour of the line between attached items. Match the border colour for outlined groups, `transparent` for none. |
--c2-button-group__item--flex | flex | 0 0 auto | `1 1 0` makes every item grow to the same width. |