Tags

Tags are compact keyword chips for collections the user manages, built on React Aria’s TagGroup, selectable and removable with full keyboard support.

Specimen

Guidelines

Code

Demo

Change the props and copy the result. The icon and action pickers mirror the Figma component’s two variant axes and compose on one trio, the way they do on the sheet; selection mode is the sheet’s checkbox axis, and the other controls are real group props.

icon

action

size

selectionMode

label

import { TagGroup } from "@/components/base/tags/tags"; <TagGroup size="lg" label="Project tags" />

The tags in this demo are fixed

The icon pick swaps between 4 fixed trios and the action pick decorates them. A group needs a TagList of Tag children, which the playground’s copyable snippet cannot carry, so the snippet covers the group element only and the icon and action picks never reach it. Paste a full example from the Code tab when starting from scratch.

The family

Four components from one module: the group owns the label, the size, and the selection mode; the list wraps the tags; each tag composes its own add-ons.

The components in this family, with their descriptions and import paths
Component	Description	Import from
TagGroup	The accessible container: names the collection and sets size and selection mode for every tag inside.	`@/components/base/tags/tags`
TagList	The list wrapper between the group and its tags, a straight re-export of React Aria’s TagList. Layout is yours; see Guidelines.	`@/components/base/tags/tags`
Tag	One chip: a text label plus optional dot, avatar, count, and close X add-ons.	`@/components/base/tags/tags`
TagAvatar	The 16px round image inside a tag; falls back to a placeholder icon when the image fails.	`@/components/base/tags/tags`

Sizes

The 3 sizes, mirrored from the size union on TagGroupProps. Measured, sm and md are both 24px tall and differ only in text scale; lg is 28px. Every add-on scales with the size except the dot, the flag, and the avatar, which stay 8px, 14px, and 16px throughout, matching the Figma sheet.

Variants by size
sm	md	lg
Design Engineering Marketing	Design Engineering Marketing	Design Engineering Marketing

Hover and focus states are live. Interact with any cell.

Content forms

The Figma component’s two content axes, live and composing, the same model as the demo above. A leading icon (none, dot, country, avatar) and a trailing action (text only, close X, count) combine freely on one tag; the checkbox axis is the Selection section below. Everything here is sm, since the sizes have their own section. The country flag is DrumKit-authored; see Built on.

icon axis: none, dot, country, avatar

action axis: text only, x close, count

composed: dot + count, country + x close, avatar + count

The close X above is per-tag onClose

Each dismissible tag wires its own onClose, which keeps the X in the tab order. A removable collection usually wants the group’s onRemove instead, which adds keyboard removal and takes the X out of the tab order; both are on the Guidelines tab under Behavior.

Selection

Selection is off by default: tags are focusable rows and nothing more. Either selection mode renders a checkbox in every tag, single forbids an empty selection unless you allow it, and multiple announces the group as multiselectable. All three groups below are live.

none (default)

single

multiple

States

Every treatment below is forced with real props: selection through the group, disabled through isDisabled. There is no hover treatment on a tag, matching the Figma sheet, which draws hover only on the close X and the checkbox.

rest

selected

disabled

disabled, selectable

disabled, selected

focus-visible: tab into this group, then arrow

Disabled shows mostly on the checkbox

Outside a selection mode, a disabled tag changes only its cursor; the visible dimming lives on the checkbox. It also leaves the tab order, measured: the row renders aria-disabled with tabindex="-1". The focus ring cannot be forced statically because the kit exposes no state props and keeps its style object private, so the panel above is live instead: the ring is a 2px outline-focus-ring outline around the whole tag.