Tags

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.

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 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.

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.

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.

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.