IconChip | Tuff Docs

Usage

Loading demo...

Keep file-type badges at 14px and let tone carry the format (red for PDF, green for CSV), consistently across the app.
Pass four-letter formats (JSON, YAML) as label like any other; the plate widens, so don't shrink fontSize to squeeze them in.
Use 32px with tone="ink" for initial plates; it inverts across light and dark, so don't hard-code a colour.
Use TxDotIndicator for a status dot; don't shrink TxIconChip to 6px to fake one.
Don't override radius without a design reason; the derived ladder is the visual language.

Prop	Type	Default	Description
`size`	`number`	`14`	Edge length in px; typically 14 (file badge), 18 (glyph plate), or 32 (initial plate).
`radius`	`number \| string`	-	Corner radius, numbers in px; derived from `size` by default, ignored for circles.
`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`; past three characters the plate widens; the default slot wins.
`fontSize`	`number`	-	Overrides the derived font size.
`ariaLabel`	`string`	-	Makes the chip `role="img"` with this name; otherwise it is `aria-hidden`.

Name	Description
`default`	Chip contents, usually an inline SVG or short text; overrides `label`.

Radius defaults to round(size / 4) (14→4, 18→5, 32→8) and font size to max(7, round(size * 0.4)) (14→7, 32→13); passing either overrides it.
Width equals size until label passes three characters; then it follows the text, at least size wide with size × 0.2 padding per side, while height, radius, and font size stay put. Slot content is not measured.
The chip is aria-hidden="true" by default because it nearly always repeats adjacent text (a PDF badge beside report.pdf); pass ariaLabel only when it 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 stays size tall (a long label only widens it).
neutral looks the same under both variants (inset fill plus hairline ring).

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