Dev Tools
RefLink
Inline navigation cross-reference. A link icon + label chip that flows inside body text and points to another docs page or an on-page anchor. Sibling to TokenTag — inline, scales with the surrounding font, and does not participate in content-flow spacing.
Import
import RefLink from '../../components/utility/RefLink.astro';Props
| Prop | Type | Required | Description |
|---|---|---|---|
href | string | Yes | Destination URL or on-page anchor, e.g. /identity/colors#deep-green-holds |
label | string | No | Display text. If omitted, derived (title-cased) from the href anchor or last path segment. Always providing an explicit label is recommended. |
Preview
Inline in body text
Color identifies the brand and guides people through it — see Deep Green holds for how the two greens divide the work, or jump straight to the Design Principles .
Scales with the surrounding text
Body SM — Colors sits in the line.
Body MD — Colors is the largest allowed.
Auto-derived label (no label prop)
Usage constraint
Use only inside text up to and including Body MD (16px).
RefLink uses font-size: inherit, so it will technically render inside larger
text — but it must not. At larger sizes the proportions break and it reads as decoration.
Never place RefLink in text larger than Body MD: no Body LG, no Body XL, no h1–h4,
no .headline-*, no .display-*. It is an inline element and does not
participate in content-flow spacing.