Tag | Tuff Docs

Usage

color sets the text color and derives the background and border.

Loading demo...

closable renders a close button; close only signals intent, and the host updates the data.

Loading demo...

background and border override the colors derived from color.

Loading demo...

With @click bound, the tag becomes a focusable button; disabled blocks click and close.

Loading demo...

Loading demo...

Use tags for metadata and state hints, not as a replacement for primary buttons.
Keep label short and readable without relying on color.
Use closable for removable filters, user labels, and temporary scopes.
Pass explicit background / border when a raw custom color lacks contrast.
Confirm removal in the host; TxTag only emits intent.

Prop	Type	Default	Description
`label`	`string \| null`	`''`	Text shown when there is no default slot; `null` counts as empty.
`icon`	`string`	`''`	Leading icon class.
`color`	`string`	`'var(--tx-color-primary)'`	Text and icon color; the base for the derived background and border.
`background`	`string`	`''`	Custom background; defaults to a translucent mix of `color`.
`border`	`string`	`''`	Custom border; defaults to a translucent mix of `color`.
`size`	`'sm' \| 'md'`	`'sm'`	Tag density.
`closable`	`boolean`	`false`	Renders the close button.
`closeAriaLabel`	`string`	`'Remove tag'`	`aria-label` of the close button; pass localized text.
`disabled`	`boolean`	`false`	Disables click and close.
`pill`	`boolean`	`false`	Fully rounded pill shape, for filter chips that must differ from square tags.
`variant`	`'outline' \| 'soft' \| 'plain'`	`'outline'`	Fill recipe; see the table below.
`dot`	`string`	-	Leading dot color; no dot when omitted.
`dotSize`	`number`	`6`	Dot diameter in px.
`count`	`number`	-	Trailing count; `0` renders, omitting it renders nothing.

`variant`	Fill	Hairline	Text	Use
`outline`	12%	32%	Full-strength hue	Default
`soft`	20%	34%	92% hue mixed toward ink	11px text on a colored fill
`plain`	Neutral fill	Neutral hairline	Secondary ink	Ignores `color`; for overflow counters like `+3` and secondary metadata

An explicit background / border overrides any variant.

Event	Payload	Description
`click`	`MouseEvent`	Fires on click unless disabled; with a listener bound, Enter / Space fire it too.
`close`	-	Fires when the close button is clicked, unless disabled.

Slot	Props	Description
`default`	-	Replaces the `label` text, keeping the icon and close button.

Without @click, the root is static metadata with no role; with it, the root is a focusable role="button" that carries aria-disabled when disabled.
The close button is a native button type="button" whose aria-label comes from closeAriaLabel.
Close clicks stop propagating, so close never also fires click.
disabled lowers opacity, disables the close button, and blocks click and close.

packages/tuffex/packages/components/src/tag/index.ts