# Inline reference

Package: @commenda/pathfinder@0.1.0
Page: /docs/components/inline-reference
Figma: https://www.figma.com/design/dn7BkGYEfIyP0o2zfesfVh/The-System?node-id=621-441

```tsx
import { InlineReference } from '@commenda/pathfinder/inline-reference';

<InlineReference
  label="Acme Pte Ltd"
  href="/entities/acme"
  previewConfig={{ content: 'Singapore · Active GST registration' }}
/>;
```


## Preview without navigation [#preview-without-navigation]

Without an `href`, a reference with preview content is a button. Click, tap, or Enter opens the existing Pathfinder Popover; Escape closes it and restores focus.


```tsx
<InlineReference
  label="entity details"
  previewConfig={{ title: 'Acme Pte Ltd', content: <EntitySummary /> }}
/>;
```


## API reference [#api-reference]

| Prop | Type | Requirement | Behavior |
| --- | --- | --- | --- |
| `label` | `string` | required | Required visible and accessible record name |
| `href` | `string` | optional | Native link target; unsafe schemes are rejected |
| `icon` | `ReactNode` | optional | Optional decorative 16px icon or flag |
| `onClick` | `MouseEventHandler<HTMLAnchorElement \| HTMLButtonElement>` | optional | App routing callback; preserve modifier-click behavior when intercepting links |
| `previewConfig` | `{ title?: string; content: ReactNode; isLoading?: boolean; }` | optional | App-supplied preview; defaults title to label |
| `className` | `string` | optional | Optional styling extension |

### previewConfig fields

| Field | Type | Required | Description |
| --- | --- | --- | --- |
| `title` | `string` | No |  |
| `content` | `ReactNode` | Yes |  |
| `isLoading` | `boolean` | No |  |

With a URL, hover/focus shows a read-only preview and click retains navigation. Without a URL, click/tap opens a form-mode Popover suitable for interactive content. Without a URL, callback, or preview, the label is noninteractive text.

## Design and accessibility rules [#design-and-accessibility-rules]

- **MARKDOWN-REF-01:** Copy/13 Strong, pearl-1000 text and pearl-400 underline. Reuse an existing Pathfinder flag/icon when appropriate.
- **MARKDOWN-REF-02:** Application owns fetching and navigation. Preserve native link behavior, modified clicks, and touch navigation.
- Essential information must remain available at the destination; a hover preview is supplementary.
- Read-only previews must not contain controls; use the preview-only button form for interactive content.