AI elements
Inline reference
An application record link with a supplied preview, or a preview-only button.
Review Acme Pte Ltd before filing.
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.
Open using click, tap, or keyboard.
API reference
| Prop | Type | Behavior |
|---|---|---|
labelRequired | string | Required visible and accessible record name |
href | string | Native link target; unsafe schemes are rejected |
icon | ReactNode | Optional decorative 16px icon or flag |
onClick | MouseEventHandler<HTMLAnchorElement | HTMLButtonElement> | App routing callback; preserve modifier-click behavior when intercepting links |
previewConfig | ObjectView fields | App-supplied preview; defaults title to label |
className | string | Optional styling extension |
previewConfigObject fields
| Field | Type | Requirement |
|---|---|---|
title | string | Optional |
content | ReactNode | Required |
isLoading | boolean | Optional |
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
- 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.