CitationChip

Inline per-claim source marker [n] that pairs with a sources list — the grounded-agent citation UX.

All components · Theme builder · Implementation source

Live preview

Install

Shell

netscript ui:add citation-chip

Usage and examples

The preview runs this JSX with the installed components. Import any composed primitives from your UI directory.

TypeScript

import { useState } from 'preact/hooks';
import { CitationChip } from '@app/components/ui/citation-chip.tsx';

export function Example() {
  const [value, setValue] = useState('standard');
  const [open, setOpen] = useState(false);
  const [notice, report] = useState('');
  return (<><div><CitationChip index={1} source="Order policy" onClick={()=>report("Order policy selected")} /></div><p role="status">{notice}</p></>);
}

Props

Generated from native deno doc --json --private over the shipped implementation. Compound component props retain their owning interface; native attributes pass through where declared.

Owner	Prop	Type	Optional	Description
`CitationChipProps`	`index`	`number`	No	1-based citation number rendered in the chip.
`CitationChipProps`	`source`	`string`	Yes	Source label, surfaced as the hover title + accessible name.
`CitationChipProps`	`active`	`boolean`	Yes	Active when its matching source row is selected.
`CitationChipProps`	`onClick`	`(index: number) => void`	Yes	Invoked with the citation index on activation.
`CitationChipProps`	`class`	`string`	Yes

TypeScript

CitationChipProps extends Omit<JSX.HTMLAttributes<HTMLButtonElement>, "class" | "onClick">

Keyboard

Key	Action
`Tab`	Focus link
`Enter`	Follow link

Tokens

Semantic contract roles: primary/subtle, primary/text, radius/badge, surface/muted, text/muted.

CSS custom properties referenced directly: --ns-ease-fast, --ns-focus-ring-offset, --ns-focus-ring-width, --ns-font-mono, --ns-inverse-fg, --ns-leading-caption, --ns-marker, --ns-muted, --ns-muted-fg, --ns-primary, --ns-primary-border, --ns-primary-fg, --ns-primary-subtle, --ns-primary-text, --ns-radius-badge, --ns-radius-sm, --ns-ring, --ns-size-switch-height, --ns-space-1, --ns-space-4, --ns-space-px, --ns-text-3xs, --ns-text-caption, --ns-tracking-caption, --ns-weight-caption.

Contract and compatibility

Accessibility pattern: native link

Native DOM attributes pass through where the implementation accepts them.

Design contract values marked planned are not implementation props. The props above describe what ships today.