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

# ScopeChip

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

> Pill container. Info tint with a matching hairline.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/ScopeChip.md#theme-key-ScopeChip-root) | 3 classes | Pill container. Info tint with a matching hairline. |
| [label](/v3/reference/theming/keys/ScopeChip.md#theme-key-ScopeChip-label) | callback | Label segment. Read-only; truncates a long value (such as a UUID) with an ellipsis. Carries the left pill radius, and the right one when the chip has no clear control. |
| [divider](/v3/reference/theming/keys/ScopeChip.md#theme-key-ScopeChip-divider) | `h-4 w-hairline shrink-0 bg-[color-mix(in_oklab,var(--info)_30%,transparent)]` | Hairline divider between the label and the clear control. |
| [remove](/v3/reference/theming/keys/ScopeChip.md#theme-key-ScopeChip-remove) | 2 classes | Clear segment (the trailing dismiss control). Carries the right pill radius. Stretches to the chip's full height so the hover target covers the pill. |

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

## root

> Pill container. Info tint with a matching hairline.

Default classes:

```text
inline-flex max-w-full items-center rounded-full hairline text-xs font-semibold
[--vueda-hairline-color:color-mix(in_oklab,var(--info)_30%,transparent)]
bg-[color-mix(in_oklab,var(--info)_10%,transparent)] text-foreground
```

Source: `client/lib/theme/vueda-tailwind/display/ScopeChip.theme.js:19`

<a id="theme-key-ScopeChip-label"></a>

## label

> Label segment. Read-only; truncates a long value (such as a UUID) with an ellipsis. Carries the left pill radius, and the right one when the chip has no clear control.

Callback:

```javascript
({ clearable }) => [
                "min-w-0 truncate rounded-l-full py-1 pl-2.5",
                clearable ? "pr-2" : "rounded-r-full pr-2.5",
            ]
```

Source: `client/lib/theme/vueda-tailwind/display/ScopeChip.theme.js:27`

<a id="theme-key-ScopeChip-divider"></a>

## divider

> Hairline divider between the label and the clear control.

Default classes:

`h-4 w-hairline shrink-0 bg-[color-mix(in_oklab,var(--info)_30%,transparent)]`

Source: `client/lib/theme/vueda-tailwind/display/ScopeChip.theme.js:34`

<a id="theme-key-ScopeChip-remove"></a>

## remove

> Clear segment (the trailing dismiss control). Carries the right pill radius. Stretches to the chip's full height so the hover target covers the pill.

Default classes:

```text
inline-flex shrink-0 items-center self-stretch rounded-r-full px-1.5 py-1 opacity-70 hover:opacity-100
hover:bg-[color-mix(in_oklab,var(--info)_15%,transparent)]
```

Source: `client/lib/theme/vueda-tailwind/display/ScopeChip.theme.js:38`