CitationMarker
StableA small numbered link that points to a source, placed after a claim in a reply.
Also known as inline citation, footnote, reference marker, citation
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
In a sentence
<p className="max-w-sm text-body leading-5 text-fg">
Revenue grew 12% year on year<CitationMarker n={1} title="Annual report" href="#annual-report" />, driven
by subscriptions<CitationMarker n={2} title="Q3 earnings call" href="#earnings-call" />.
</p>Markers sit right after the text they support.
When to use it
A small raised number after a claim that links to its source, like a footnote. It keeps the sentence readable while letting people check where a fact came from.
Use it for
- After a claim in a reply that comes from a source.
- Linking to a matching entry in a source list on the same page.
Not for
- Showing a source's details when people point at it: use CitationHoverCard.
- The full list of sources under a reply: use SourceList.
- A label that stands outside a sentence: use Badge.
Do and avoid
Bags are free up to 20 kg1 on this fare.
Bags are free up to 20 kg on this fare. (Sources at the end, somewhere.)
Do
- Number markers in the order the sources first appear.
- Give each a title, so the tooltip and screen readers say what the source is.
- Give each marker a real link, or give your source list matching anchors.
- Place the marker right after the claim.
Avoid
- Do not use it for footnotes that are not links.
- Do not reuse a number for different sources in one message.
- Do not use it outside a sentence. Use Badge for a standalone label.
- Do not rely on hover to show the source. People on touch screens never see it.
On a phone
- The marker is only 16px tall, but on touch screens it gets an invisible tap area about 8px larger on each side.
- Its number is 12px on touch screens.
- The tooltip with the source title needs a hover, so a phone only sees the number. Show the source name in the list below the text.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| nrequired | number | none | The number shown in the chip and used in the default anchor and label. |
| href | string | `#source-${n}` | Link target. Defaults to an in-page anchor named for the number. |
| title | string | none | Source title. Shown as the native tooltip and appended to the accessible name. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one CitationMarker switches all of this from its properties panel, across 4 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| State | Hover, Pressed and Focus come from the browser. | Default, Hover, Pressed, Focus |
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- hover
- The number fills with the accent colour when the pointer is over it.
- focus
- A visible focus ring appears when you reach the link with the keyboard.
Tokens
Change one of these and every part that uses it follows.
--accent-soft--accent-fg--accent--on-accent
Built in
- It is a real link, so the Tab key reaches it and Enter follows it.
- Screen readers hear "Source 1" followed by the title.
- The title also shows as a tooltip when a mouse hovers over it.
- A clear outline shows when someone tabs to it.
What you need to do
- Give each marker a title, so screen readers hear what the source is, not only its number.
- Leave some space around markers in dense text. They are small to tap.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide