---
title: "IconChip"
description: "A filled plate that carries a format badge, an initial, or a glyph."
category: Basic
status: beta
since: 0.3.9
tags: [icon, badge, chip, avatar]
syncStatus: reviewed
verified: true
---

## Usage

### Sizes and Tones
:::TuffDemoWrapper{demo="IconChipIconChipDemo" code-lang="vue" description="14, 18, and 32px tiers, a wide label, and the circle shape."}
---
code: |
  <template>
    <TxIconChip :size="14" tone="red" label="PDF" />
    <TxIconChip :size="14" tone="ink" label="JSON" />
    <TxIconChip :size="18" tone="accent" variant="soft">
      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8z" />
      </svg>
    </TxIconChip>
    <TxIconChip :size="32" tone="ink" :font-size="13" label="C" />
    <TxIconChip :size="14" tone="green" shape="circle" />
  </template>
---
:::

### Best Practices

- 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.

## API Reference

### Props

| 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`. |

### Slots

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

## Overview

- 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).

## Technologies

- Source: `packages/tuffex/packages/components/src/icon-chip/`.
- Adapted from [Beautiful UI](https://www.beautifului.dev), © 2026 Shane Levine, MIT; `variant="soft"` is an addition.

<TuffDocSourceLink />