Components / agents

Inline Citation

A small numbered marker after a claim that links to the page the claim came from.

import { InlineCitation } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { InlineCitation } from '@basiiik/ui';

<InlineCitation index={1} href="https://basiiik.pages.dev/components/modal/" sourceTitle="Modal: spec and rules" />
  • Example values were filled in for the required props index, href, sourceTitle: replace them with your own.
  • Values in braces are your own variables, handlers or data, such as const [open, setOpen] = useState(false).
  • Hover is CSS (a brand tint) for a real pointer; Focused is :focus-visible on the link.
  • Storybook: Agents/Inline citation.

Props

PropTypeNotes
index requirednumber
href requiredstring
sourceTitle requiredstring

States. Hover is CSS (a brand tint) for a real pointer; Focused is :focus-visible on the link.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

  • A claim in an agent answer that comes from a page
  • Next to a Sources list so the reader can see which claim came from which page

Do not use it when

  • A list of sources (use Sources)
  • A footnote that explains something (use text)
  • A link to another page of the product (use Link)

Rules for agents

  • Give it the same index as the source in the Sources list, and the same href and title
  • Place it after the punctuation of the claim it supports
  • Use one marker per source per claim; do not stack a run of numbers
  • Pass sourceTitle, the page's own title

Avoid

  • A bare number link with no sourceTitle
  • A marker with no matching entry in Sources
  • Putting the marker before the claim
  • Using it as a button

Writing the content

  • Source title: the page's own title, not its address

Keyboard

  • Tab moves to the marker
  • Enter follows the link and opens the page in a new tab

Accessibility

  • A real link named "Source 2: <page title> (opens in a new tab)", so a screen reader does not only hear "2"
  • The page title is also the tooltip
  • The marker is small on purpose: an inline link in a sentence is exempt from the target-size minimum, so do not use it as a standalone control

Colour tokens it reads

color.bg.brand.subtlecolor.bg.mutedcolor.border.focuscolor.text.brandcolor.text.secondary

Related

agents 3 Figma variants Try it in the live demo