---
url: "https://vueda.dev/v3/reference/theming/keys/ButtonGroup.md"
title: "ButtonGroup"
---

# ButtonGroup

Source: `client/lib/theme/vueda-tailwind/controls/index.js`

> The segmented-cluster shell. Strips inner radii between adjacent children so a row (or column when `orientation` is `vertical`) of buttons, inputs, and Select triggers reads as one slab. Outline buttons use DPR-aware inset hairlines rather than layout borders, so adjacent outline buttons overlap by exactly `--vueda-hairline-width` to share one visible seam. Focus z-index promotion keeps the focus ring from being clipped by neighbours. Nested [ButtonGroup](/v3/reference/theming/keys/ButtonGroup.md) children retain an 8px gap. The icon-only-stays-seamless / text-or-mixed-keeps-seams rule is applied by the component, not this slot.

Vue component: [ButtonGroup](/v3/reference/api/vue/ButtonGroup.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/ButtonGroup.md#theme-key-ButtonGroup-root) | callback | The segmented-cluster shell. Strips inner radii between adjacent children so a row (or column when `orientation` is `vertical`) of buttons, inputs, and Select triggers reads as one slab. Outline buttons use DPR-aware inset hairlines rather than layout borders, so adjacent outline buttons overlap by exactly `--vueda-hairline-width` to share one visible seam. Focus z-index promotion keeps the focus ring from being clipped by neighbours. Nested [ButtonGroup](/v3/reference/theming/keys/ButtonGroup.md) children retain an 8px gap. The icon-only-stays-seamless / text-or-mixed-keeps-seams rule is applied by the component, not this slot. |

<a id="theme-key-ButtonGroup-root"></a>

## root

> The segmented-cluster shell. Strips inner radii between adjacent children so a row (or column when `orientation` is `vertical`) of buttons, inputs, and Select triggers reads as one slab. Outline buttons use DPR-aware inset hairlines rather than layout borders, so adjacent outline buttons overlap by exactly `--vueda-hairline-width` to share one visible seam. Focus z-index promotion keeps the focus ring from being clipped by neighbours. Nested [ButtonGroup](/v3/reference/theming/keys/ButtonGroup.md) children retain an 8px gap. The icon-only-stays-seamless / text-or-mixed-keeps-seams rule is applied by the component, not this slot.

Callback:

```javascript
({ orientation }) => ({
            class: [
                // Layout and child focus handling.
                "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative",

                // Child sizing and nested groups.
                "[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",

                // Orientation classes.
                {
                    "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot=button][data-emphasis=outline]:not(:first-child)]:-ml-[var(--vueda-hairline-width)]":
                        !orientation || orientation === "horizontal",
                    "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot=button][data-emphasis=outline]:not(:first-child)]:-mt-[var(--vueda-hairline-width)]":
                        orientation === "vertical",
                },
            ],
        })
```

Source: `client/lib/theme/vueda-tailwind/controls/ButtonGroup.theme.js:18`