---
url: "https://vueda.dev/v3/reference/theming/keys/SortChip.md"
title: "SortChip"
---
# SortChip
Source: `client/lib/theme/vueda-tailwind/display/index.js`
> Pill container. Neutral surface with a strong hairline so it reads against both the card and the constraints-strip tint.
Vue component: [SortChip](/v3/reference/api/vue/SortChip.md)
| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/SortChip.md#theme-key-SortChip-root) | 3 classes | Pill container. Neutral surface with a strong hairline so it reads against both the card and the constraints-strip tint. |
| [label](/v3/reference/theming/keys/SortChip.md#theme-key-SortChip-label) | callback | Label segment: field label and direction glyph. Clicking it flips direction. Stretches to full pill height so the hover target covers the pill. Carries the left pill radius when no leading ordinal is shown, and the right pill radius when no remove control is shown. |
| [handle](/v3/reference/theming/keys/SortChip.md#theme-key-SortChip-handle) | 2 classes | Drag handle (`.drag-handle`, grab cursor): a grip glyph plus the priority ordinal. Leftmost segment carrying the left pill radius. Shown only with more than one sort, so it is also the reorder affordance for touch (no hover needed to discover it). |
| [grip](/v3/reference/theming/keys/SortChip.md#theme-key-SortChip-grip) | `leading-none opacity-70` | Grip glyph inside the handle. The visible drag affordance; sized down to read as chrome beside the ordinal. |
| [ordinal](/v3/reference/theming/keys/SortChip.md#theme-key-SortChip-ordinal) | `font-mono text-[length:var(--vueda-text-micro)] font-medium tabular-nums text-muted-foreground` | Priority ordinal. Mono and muted: it is positional read-out, and ordering priority is the one thing a sort chip carries that a filter chip does not. |
| [field](/v3/reference/theming/keys/SortChip.md#theme-key-SortChip-field) | `font-semibold` | Field label segment. |
| [direction](/v3/reference/theming/keys/SortChip.md#theme-key-SortChip-direction) | `text-muted-foreground` | Direction glyph. Rendered descending by default; the SFC rotates it 180deg for ascending. |
| [divider](/v3/reference/theming/keys/SortChip.md#theme-key-SortChip-divider) | `h-4 w-hairline bg-border` | Hairline divider between the label and the remove control. |
| [remove](/v3/reference/theming/keys/SortChip.md#theme-key-SortChip-remove) | `inline-flex items-center self-stretch rounded-r-full px-1.5 py-1 opacity-70 hover:bg-accent hover:opacity-100` | Remove segment (the trailing dismiss control). Carries the right pill radius; stretches to full pill height to match the label hover target. |
## root
> Pill container. Neutral surface with a strong hairline so it reads against both the card and the constraints-strip tint.
Default classes:
```text
inline-flex items-center rounded-full hairline hairline-border-strong bg-card text-xs font-semibold text-foreground
[&.sortable-ghost]:opacity-40
[&.sortable-drag]:cursor-grabbing [&.sortable-drag]:hairline-primary [&.sortable-drag]:bg-primary/10 [&.sortable-drag]:text-primary-text
```
Source: `client/lib/theme/vueda-tailwind/display/SortChip.theme.js:20`
## label
> Label segment: field label and direction glyph. Clicking it flips direction. Stretches to full pill height so the hover target covers the pill. Carries the left pill radius when no leading ordinal is shown, and the right pill radius when no remove control is shown.
Callback:
```javascript
({ showOrdinal, removable }) => [
"inline-flex items-center self-stretch gap-1.5 py-1 pr-2 hover:bg-accent",
showOrdinal ? "pl-1.5" : "rounded-l-full pl-2.5",
!removable && "rounded-r-full",
]
```
Source: `client/lib/theme/vueda-tailwind/display/SortChip.theme.js:31`
## handle
> Drag handle (`.drag-handle`, grab cursor): a grip glyph plus the priority ordinal. Leftmost segment carrying the left pill radius. Shown only with more than one sort, so it is also the reorder affordance for touch (no hover needed to discover it).
Default classes:
```text
drag-handle inline-flex items-center self-stretch gap-0.5 rounded-l-full cursor-grab select-none py-1 pl-2 pr-1
text-[length:var(--vueda-text-micro)] text-muted-foreground hover:bg-accent
```
Source: `client/lib/theme/vueda-tailwind/display/SortChip.theme.js:39`
## grip
> Grip glyph inside the handle. The visible drag affordance; sized down to read as chrome beside the ordinal.
Default classes:
`leading-none opacity-70`
Source: `client/lib/theme/vueda-tailwind/display/SortChip.theme.js:46`
## ordinal
> Priority ordinal. Mono and muted: it is positional read-out, and ordering priority is the one thing a sort chip carries that a filter chip does not.
Default classes:
`font-mono text-[length:var(--vueda-text-micro)] font-medium tabular-nums text-muted-foreground`
Source: `client/lib/theme/vueda-tailwind/display/SortChip.theme.js:50`
## field
> Field label segment.
Default classes:
`font-semibold`
Source: `client/lib/theme/vueda-tailwind/display/SortChip.theme.js:54`
## direction
> Direction glyph. Rendered descending by default; the SFC rotates it 180deg for ascending.
Default classes:
`text-muted-foreground`
Source: `client/lib/theme/vueda-tailwind/display/SortChip.theme.js:58`
## divider
> Hairline divider between the label and the remove control.
Default classes:
`h-4 w-hairline bg-border`
Source: `client/lib/theme/vueda-tailwind/display/SortChip.theme.js:62`
## remove
> Remove segment (the trailing dismiss control). Carries the right pill radius; stretches to full pill height to match the label hover target.
Default classes:
`inline-flex items-center self-stretch rounded-r-full px-1.5 py-1 opacity-70 hover:bg-accent hover:opacity-100`
Source: `client/lib/theme/vueda-tailwind/display/SortChip.theme.js:66`