Cite
A numbered link to a source, with a preview on hover and focus.
SourcePackage @weft-js/warp
Preview
tsx
import { Cite, Sources, Stack, Text } from '@weft-js/warp'import type { AgentSource } from '@weft-js/warp'export function Inline() { return ( <Stack gap="group"> <Text> The deploy was held back after three failed checks <Cite n={1} source={DEPLOY_SOURCES[1]} href="#cite-s1" />, and the cause is one retry setting <Cite n={2} source={DEPLOY_SOURCES[2]} href="#cite-s2" />. </Text> <Sources items={CITED} base="cite" /> </Stack> )}const DEPLOY_SOURCES: AgentSource[] = [ { title: 'd-4819 build log', path: 'mobile-bff · 15:27', snippet: 'health check failed: upstream timed out after 3000 ms in ap-south' }, { title: 'Health checks', path: 'weft docs · Deploys', snippet: 'A deploy that fails three checks in a row is held back from traffic.' }, { title: 'c44e190', path: 'mobile-bff · retry.ts · L18', snippet: 'const attempts = 5 // was 2' },]const CITED = DEPLOY_SOURCES.slice(1)Installation
npm install @weft-js/warpUsage
tsx
import { Cite } from '@weft-js/warp'<Stack gap="group"> <Text> The deploy was held back after three failed checks <Cite n={1} source={DEPLOY_SOURCES[1]} href="#cite-s1" />, and the cause is one retry setting <Cite n={2} source={DEPLOY_SOURCES[2]} href="#cite-s2" />. </Text> <Sources items={CITED} base="cite" /></Stack>Accessibility
- Each is a link named "Source 1". The preview comes next in the tab order, so its link can be reached.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
n | number | — | The number. |
source | AgentSource | — | What the preview shows. |
href | string | — | The id of the source card. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="cite"] [data-part="content"]
contenttitledescriptionopen