IconChip

Basic Usage

Loading demo...

Neither radius nor fontSize has to be passed — both derive from size:

Radius is round(size / 4): 14→4, 18→5, 32→8, matching all three real Beautiful UI usages.
Font size is max(7, round(size * 0.4)): 14→7 (three uppercase letters must fit) and 32→13.

Pass radius / fontSize explicitly to override. shape="circle" ignores radius rather than fighting it.

Prop	Type	Default	Description
`size`	`number`	`14`	Edge length in px. Upstream uses 14 (file badge), 18 (glyph plate), and 32 (initial plate).
`radius`	`number \| string`	-	Corner radius; numbers are px. Defaults to `round(size / 4)`, and is ignored when `shape` is `circle`.
`tone`	`'neutral' \| 'ink' \| 'accent' \| 'green' \| 'orange' \| 'red'`	`'neutral'`	Colour role.
`variant`	`'solid' \| 'soft'`	`'solid'`	`solid` fills with the tone; `soft` uses its tint with a 30% hairline ring.
`shape`	`'square' \| 'circle'`	`'square'`	Plate shape.
`label`	`string`	-	Short text such as `PDF`. The default slot wins over it.
`fontSize`	`number`	-	Overrides the derived font size.
`ariaLabel`	`string`	-	Promotes the chip to `role="img"` with that name. Left unset, the chip is `aria-hidden`.

Name	Description
`default`	Chip contents, usually an inline SVG or short text. Overrides `label` when provided.

TxIconChip is a presentational leaf and emits nothing.

The chip is aria-hidden="true" by default: it nearly always duplicates adjacent text (a PDF badge beside report.pdf). Pass ariaLabel only when the chip is the sole carrier of the information.
The soft hairline ring is a box-shadow, not a border, so it takes no layout space and the chip's box always equals size.
neutral looks the same under both variants (inset fill plus hairline ring); it was never a fill colour.

Keep file-type badges at 14px and let tone carry the format (red for PDF, green for CSV), consistently across the app.
Use 32px with tone="ink" for initial plates — it inverts correctly across light and dark, so do not hard-code a colour.
Reach for TxDotIndicator when you need a status dot; do not shrink TxIconChip to 6px to fake one.
Avoid overriding radius without a design reason: the derived ladder is the visual language itself.

Component source: packages/tuffex/packages/components/src/icon-chip/src/TxIconChip.vue.
Types: packages/tuffex/packages/components/src/icon-chip/src/types.ts.
Verified coverage: packages/tuffex/packages/components/src/icon-chip/__tests__/icon-chip.test.ts verifies the radius/font-size ladder at 14/18/32, explicit overrides winning, the circle shape ignoring radius, the aria-hidden to role="img" switch, and the default slot overriding label.

packages/tuffex/packages/components/src/icon-chip/index.ts