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

# ButtonGroupText

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

> The static-label chip used to join readable copy ("of", "to", a unit suffix) into a [ButtonGroup](/v3/reference/theming/keys/ButtonGroup.md). Wears the button shape (2px control radius, hairline edge) but sits on `--muted` so it does not read as pressable; padding picks 16px to match the default button's `px-vueda-control-px` baseline.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/ButtonGroupText.md#theme-key-ButtonGroupText-root) | 2 classes | The static-label chip used to join readable copy ("of", "to", a unit suffix) into a [ButtonGroup](/v3/reference/theming/keys/ButtonGroup.md). Wears the button shape (2px control radius, hairline edge) but sits on `--muted` so it does not read as pressable; padding picks 16px to match the default button's `px-vueda-control-px` baseline. |

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

## root

> The static-label chip used to join readable copy ("of", "to", a unit suffix) into a [ButtonGroup](/v3/reference/theming/keys/ButtonGroup.md). Wears the button shape (2px control radius, hairline edge) but sits on `--muted` so it does not read as pressable; padding picks 16px to match the default button's `px-vueda-control-px` baseline.

Default classes:

```text
bg-muted text-muted-foreground flex items-center gap-2 rounded-vueda-control hairline hairline-border px-4 text-sm font-medium
[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4
```

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