Tag

Demo

Use closable tags for removable filters or user-defined labels.

Loading demo...

Loading demo...

Loading demo...

Loading demo...

The root is static metadata with no live-region role; tag text must be meaningful without relying on color.
label defaults to an empty string; null is normalized to an empty string.
The default slot replaces label content but keeps the icon and close affordance.
color defaults to var(--tx-color-primary). Missing background and border are derived from color with color-mix.
The close affordance is a native button type="button" with aria-label="Remove tag".
Close clicks stop propagation, so close does not also emit the tag-level click event.
disabled reduces opacity, disables the close button, and blocks both click and close emits.

Prop	Type	Default	Description
`label`	`string \| null`	`''`	Text content when the default slot is not provided.
`icon`	`string`	`''`	Leading icon class.
`color`	`string`	`'var(--tx-color-primary)'`	Main text/icon color and base color for derived background/border.
`background`	`string`	`''`	Custom background color. Defaults to a translucent mix of `color`.
`border`	`string`	`''`	Custom border color. Defaults to a translucent mix of `color`.
`size`	`'sm' \| 'md'`	`'sm'`	Tag density.
`closable`	`boolean`	`false`	Render the close button.
`disabled`	`boolean`	`false`	Disable tag click and close interactions.
`pill`	`boolean`	`false`	Use a fully rounded pill shape (adds `.pill` to the root); for filter chips and similar cases that should read differently in shape from square tags.
`variant`	`'outline' \| 'soft' \| 'plain'`	`'outline'`	Fill recipe; see the table below.
`dot`	`string`	-	Leading dot colour; omit to render no dot. Lets a tag carry a category hue while its text stays legible.
`dotSize`	`number`	`6`	Dot diameter in pixels.
`count`	`number`	-	Trailing count badge; `0` renders, omitting the prop renders nothing.

The three variant recipes:

Value	Fill	Hairline	Text	Use
`outline`	12%	32%	Full-strength hue	The default, byte-identical to existing tags
`soft`	20%	34%	92% hue mixed toward ink	Steadier for 11px text on a coloured fill
`plain`	Neutral fill	Neutral hairline	Secondary ink	Ignores `color`; for overflow counters like `+3` and metadata that must not compete

An explicit background / border still overrides whichever variant is chosen.

Event	Payload	Description
`click`	`MouseEvent`	Emitted when the tag root is clicked and `disabled=false`.
`close`	-	Emitted when the close button is clicked and `disabled=false`.

Slot	Props	Description
`default`	-	Replaces the `label` text inside the tag content area.

Use tags for metadata and state hints, not as a replacement for primary buttons.
Keep label concise; long strings break the compact rhythm of tables and filter rows.
Use closable for filters, user labels, and temporary scopes where removal is expected.
Provide explicit background/border when using custom raw colors that need stronger contrast.
For destructive removal, confirm in the host before mutating data; TxTag only emits intent.

Accessibility note: The close affordance is a real button, but the tag-level click handler lives on a non-focusable span. Use click only for optional pointer affordances; choose a button or checkbox pattern when the tag action must be keyboard reachable.
Verified coverage: tag.test.ts checks label/icon/style rendering, default-slot override, click and close emission separation, disabled blocking, and disabled close-button state.

Component source: packages/tuffex/packages/components/src/tag/src/TxTag.vue.
Types: packages/tuffex/packages/components/src/tag/src/types.ts exports TagProps and TagEmits.
Export alias: packages/tuffex/packages/components/src/tag/index.ts exports Tag, TxTag, TagProps, TagEmits, and TxTagInstance.
Coverage: packages/tuffex/packages/components/src/tag/__tests__/tag.test.ts verifies rendering, slots, events, and disabled behavior.

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