# CodeRef
- **Category:** Data Display (`data-display`)
- **Slug:** `data-display/code-ref`
- **Status:** stable
- **Platforms:** web
- **Import:** `import { CodeRef } from "@protocore/pds";`
- **Docs:** https://pds.protocore.io/components/data-display/code-ref
> An inline mono id/hash chip with middle-truncation — copy-on-click, or a link when href is set.
## When to use it
**CodeRef** is for machine identifiers a human occasionally needs to copy or inspect — tx hashes, block numbers, request IDs, addresses, API object IDs. Middle-truncation keeps the row compact while preserving the distinctive head and tail.
Use **Tag** for human metadata labels (a category, a version) that aren't copied. Use **MaskedValue** when the value is secret and must stay hidden until an explicit reveal — CodeRef always shows its value. For a whole structured object rather than a single id, use **JsonViewer**.
## Props
| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `chars` | `number` | no | `12` | Max characters to display; longer values are middle-truncated with an ellipsis. Defaults to `12`. Ignored when `children` is provided. |
| `children` | `ReactNode` | no | — | Optional display override; when set it is shown verbatim (no truncation). |
| `className` | `string` | no | — | — |
| `full` | `string` | yes | — | The full identifier — copied verbatim, and the basis for truncation. |
| `href` | `string` | no | — | When set, renders an anchor to this href instead of a copy button. |
| `style` | `CSSProperties` | no | — | — |
## Examples
### Basics
Pass the `full` value; the chip shows a middle-truncated form and copies the verbatim string on click, briefly flashing `COPIED`. It always carries the full value in its `title` for hover inspection.
```tsx
import { CodeRef } from "@protocore/pds";
export default function CodeRefBasics() {
return (
);
}
```
### Truncation & override
`chars` sets the maximum visible glyph count; longer values keep the head and tail with an ellipsis in the middle — so hashes stay identifiable at both ends. Pass `children` to show a custom label verbatim (no truncation) while still copying `full`.
```tsx
import { CodeRef } from "@protocore/pds";
const HASH = "0x9f2c7a1e4b8d3f6009c5ea71b2d4c8f0a1e3b5d7c9018e2f46a3b5c7d9e1f0a2b";
export default function CodeRefTruncation() {
return (
tx · full label
);
}
```
## Usage
**Do**
- Use it for identifiers a user copies or clicks through — hashes, ids, addresses.
- Tune `chars` so both the head and tail of a hash stay recognizable.
- Set `href` for ids that resolve to an explorer or detail page.
- Pass a readable `children` label when the raw value is opaque.
**Don't**
- Don't use it for secrets — those need MaskedValue's explicit reveal.
- Don't put prose or multi-word labels in `full`; it's meant for a single token.
- Don't truncate so aggressively (`chars` too low) that ids collide visually.
- Don't wrap it in another link when you've already set `href`.
## Accessibility
**Keyboard**
| Keys | Action |
| --- | --- |
| `Tab` | Focuses the chip (a button, or an anchor when href is set). |
| `Enter / Space` | Copies the full value (button) or follows the link (anchor). |
**Notes**
- The copy button carries an `aria-label` of `Copy `, so the full value is announced even when the label is truncated.
- The full value is also mirrored into the `title` attribute for pointer hover.
- Copy silently no-ops where the Clipboard API is unavailable; the visible state simply won't flip to COPIED.
## Related
`masked-value`, `json-viewer`, `tag`, `money-amount`
---
© Protocore. All rights reserved. Use of the Protocore Design System requires prior written authorization from Protocore (contact@protocore.io). These machine-readable materials must not be ingested into ML-training datasets or derivative design systems. See https://pds.protocore.io/legal/