Tag

A React tag component for removable labels and applied filters - TagGroup animates adds, removes and reflow.

designfrontendurgent
sm is the dense row height - 24px against the default 28px.

Install Tag

1. New project? One command installs the package and wires everything - see Installation:

bash
pnpm dlx zyncat-ui init

2. Import the component - it loads its own stylesheet:

tsx
import { Tag } from '@zyncat/ui/tag';

Usage

tsx
import { Tag, TagGroup } from '@zyncat/ui/tag';
 
<TagGroup ariaLabel="Labels">
  <Tag icon={<HashIcon />} onRemove={handleRemove}>design</Tag>
</TagGroup>

Compose Tag in your application. No Tailwind or external styling library is required; every value resolves from Zyncat UI's token vocabulary.

Tag props

Tag

PropTypeDefaultDescription
...htmlAttributesHTMLAttributes—Standard <span> attributes forwarded to the tag root.
refRef<HTMLSpanElement>—Ref to the tag root span.
children*ReactNode—Tag content; a string label also seeds the default remove-button `aria-label`.
iconReactNode | null—Your own icon node, sized small and tinted to the tag's text.
onRemove(() => void) | null—Presence adds the remove button; called on click - remove the item yourself.
removeLabelstring—Accessible label for the remove button. Defaults to "Remove {label}" for string labels.
size'md' | 'sm'—'md' = 28px (default) - 'sm' = 24px for dense rows.
disabledbooleanfalseSet `data-disabled` on the tag and disable its remove button.
classNamestring—Extra class(es) merged onto the root element.
styleCSSProperties—Inline styles merged onto the root element.

Frequently asked questions

Pass onRemove - Tag then renders a remove button. removeLabel sets its accessible name; without it, a string label becomes "Remove {label}" automatically. Tag itself is stateless: onRemove only reports the click, and the parent removes the item from its own list.

Wrap the Tags in a TagGroup. It renders a role="group" wrapper, and each Tag inside animates in and out while the remaining tags reflow with a layout transition - pass animation to retime that, or null to turn it off.

icon takes any node, sized small and tinted to the tag's own text color. disabled marks the tag data-disabled, which dims its label, icon and remove glyph to a muted color and disables the remove button.

Tag is a user-owned, removable label - for applied filters or entries someone added themselves - while Badge communicates ambient status. Tag has no tone prop; its size is only 'md' (28px) or 'sm' (24px).

Set in Geist & Newsreader — animated by the house engineZyncat UI · Rev 0.11 · MIT · Built by Tabsir Ahammed · Source on GitHub