Skip to content
Component installs need the registry setup
VegaStack Design

Tag Group

Hue-tinted label chips on the 10-hue tag palette — bordered tints, +N overflow collapsing, removable tags.

Status
stable
Since
0.3.0
Accessibility pattern
list and listitem semantics

Last updated

Information TechnologyB2BSaaSEnterpriseUncategorized
FintechLogisticsConsumer

Install

Configure registry credentials first using the Quickstart. Before copying this item or any transitive registry dependency, verify the signed manifest and save the exact bytes for Tag Group before installation. Retain the digest printed by this command.

pnpm exec vegastack-design verify tag-group

Install with the pinned shadcn CLI. Bare shadcn does not verify VegaStack signature or integrity.

pnpm dlx shadcn@4.21.0 add @vegastack/tag-group

Run the exact offline --post-write command printed by the preflight, using its saved item path and independently retained --expected-integrity digest. Use the saved preflight for every transitive registry dependency too; stop on any mismatch before using the components.

The same command installs the registry items it composes: @vegastack/chip.

Usage

import { Tag, TagGroup } from "@/components/ui/tag-group";

<TagGroup max={3} aria-label="Categories">
  <Tag hue="yellow">Information Technology</Tag>
  <Tag hue="blue">B2B</Tag>
  <Tag hue="green">SaaS</Tag>
  <Tag hue="purple">Enterprise</Tag>
</TagGroup>;

Anatomy

Tag Group is a compound component. Every exported part, with the data-slot it renders (generated from the canonical source):

Tag — data-slot="tag"
TagGroup — data-slot="tag-group" | "tag-group-overflow"

Examples

The 10-hue palette

Tags ride the --tag-{hue} token trios (-subtle fill, -text ink, base accent) — 10 chromatic hues plus the neutral chip on muted, each AA-gated in both themes by the token contrast gate. Hue is a decorative label color: it never signals status (that's Badge's five semantic intents).

neutralbluecyangreenlimeyelloworangeredpinkmagentapurple

Removable tags

Design partnerPriorityEMEA

Overflow

max collapses the group behind a +N chip; activating it expands the group inline — the "View all values" pattern from record panes. The group renders role="list", so tag counts are announced; the overflow control lives inside its own listitem.

Badge vs Tag

A Tag is the Chip primitive at the inline (sm) tier — the hue formula, the geometry and the 24×24 remove control all live there, and this component adds the group: the role="list" semantics, the +N overflow disclosure and the focus move that follows it. Reach for Chip directly only when you need a pill that is not one of a group.

BadgeTag
Voicestatus (5 semantic intents)label (10 decorative hues)
Shapepill (rounded-full)pill (rounded-full)
Extrasdot, loading, animate-inremove button, group overflow

API Reference

Tag

PropTypeDefaultDescription
hueChipHue'neutral'Chip hue from the tag palette. Decorative label color — never a status signal (that's Badge's job).
onRemove(() => void)—Render a remove affordance and call this when it is activated. The button is labelled "Remove {label}" from the tag's text content via removeLabel.
removeLabelstring'Remove tag'Accessible label for the remove button. Provide a specific label when onRemove is set.

Data attributes and CSS variables on Tag

AttributeValues
data-slot"tag"

TagGroup

PropTypeDefaultDescription
aria-labelstring—Accessible label for the group list.
expandLabelstring`Show ${hiddenCount} more tags`Accessible label for the expand chip.
maxnumber—Collapse the group past this many tags behind a +N chip; activating it expands the group inline (the "View all values" pattern). Omit to always show every tag.

Data attributes and CSS variables on TagGroup

AttributeValues
data-expanded""
data-slot"tag-group" | "tag-group-overflow"

Accessibility

  • Give each TagGroup an aria-label or another accessible name; it exposes list/listitem semantics.
  • Supply a specific removeLabel whenever a tag is removable, such as “Remove SaaS”.
  • The remove control's REAL border box is 24×24 (a round ghost Button size="icon-xs"), and the +N overflow control is itself a 28px chip — neither relies on an invisible pseudo-element a nested <button> would clip.
  • Hue is decorative. Do not rely on a tag color alone to communicate status or meaning.
ContractStates tested
Behaviourdefault, expanded
Accessibilityexpanded, labeled, semantic-html
Visualdefault, hover

Do / Don't

Do
Use tags for editable labels and decorative categorization, with explicit remove labels.
Don't
Use a tag hue as the only status signal or omit the group’s accessible name.

Chip

The one labelled pill — 10 decorative hues, two tiers, an optional selected fill, and a real 24px remove control.

Stat

A labelled value block — muted label over a value, an honest muted empty state, and an optional delta line. Two scales.

On this page

InstallUsageAnatomyExamplesThe 10-hue paletteRemovable tagsOverflowBadge vs TagAPI ReferenceTagTagGroupAccessibilityDo / Don't