Source Chip - Canvas Design System

When to Use

Use when: The AI wrote something from material the person gave it and the person should be able to trace it: after each sentence of a Synthesize recap, beside a quote in an Impact Report, under a theme built from notes. One chip per source, straight after the claim it supports.

Don't use when: It is a topic or metadata tag (Pill), a status or a count (Badge), or an ordinary link in running text that is not saying where a claim came from.

Variants

In a recap

Chips sit inline after the sentence they support. Keep the label short and specific: whose note and when, which poll and how many voted.

Pricing won the vote, 9 of 12. From a poll: Poll 3, 9 of 12 From a note: Your note 10:31 Enterprise SSO was the closest miss; two leaders asked for it to come back next quarter. From a recording: Recording 10:18

Pricing won the vote, 9 of 12. <?= ws_source_chip('Poll 3, 9 of 12', ['kind' => 'poll', 'href' => '#poll-3']) ?>

Every kind

kind picks the glyph and the words a screen reader hears first. Leave it out and the chip has no glyph.

Your note 10:31 Recording 10:18 Whiteboard photo Pre-read.pdf Miro board Poll 3

Unlinked

When the source can no longer be opened (deleted, or never uploaded), 'unlinked' => true drops the link, dashes the border and says "not linked" in words.

Whiteboard photonot linked

<?= ws_source_chip('Whiteboard photo', ['kind' => 'photo', 'unlinked' => true]) ?>

From JavaScript

WsAgent.sourceChip(label, options) in /js/ws-agent.js prints the same markup for a recap drawn in the browser.

line.insertAdjacentHTML('beforeend', ' ' + WsAgent.sourceChip('Help request 10:18', { kind: 'recording', href: '#help-3' }));

States

State	Behavior
Linked	An `<a>`. Hover turns it to the brand tint; keyboard focus draws the focus ring.
Plain	No `href`: a `<span>`, for a source that has nowhere to open.
Unlinked	A `<span>` with a dashed border and the words "not linked".

Options

Option	Type	Default	Purpose
`$label`	string		Short name of the source
`kind`	string	`null`	`note` \| `recording` \| `photo` \| `document` \| `board` \| `poll`
`href`	string	`''`	Where the source opens; renders a link
`unlinked`	bool	`false`	The source can no longer be opened
`id` / `class` / `attrs`	string / string / array		Element id, classes and attributes

Accessibility

Concern	Behavior
Element	A link when it has `href`, plain text when not, so only chips that go somewhere are in the Tab order.
Kind in words	The glyph is `aria-hidden`; visually hidden words give the kind before the label ("From a poll: Poll 3, 9 of 12"), or "Source:" when there is no kind.
Unlinked	Says "not linked" in visible text, so the dashed border is never the only sign.
Focus	The sky-blue focus ring, offset from the chip.

Tokens

Token	Used for
`--gray-100` / `--gray-200` / `--gray-300`	Fill and borders
`--brand-tint` / `--brand-line` / `--brand-ink`	Hover on a linked chip
`--text-caption` / `--radius-sm`	Size and shape, small enough to sit inside a sentence
`--focus-ring` / `--focus-ring-offset`	Keyboard focus

CSS Classes

Class	Purpose
`.ws-source-chip`	The chip; `--unlinked` when the source cannot be opened
`.ws-source-chip__glyph`	The kind's glyph
`.ws-source-chip__label`	The label, which truncates rather than wraps
`.ws-source-chip__state`	The words "not linked"

Files

File	Purpose
`includes/components/helpers.php`	`ws_source_chip()` helper
`includes/components/source-chip.php`	Template
`includes/components/components.css`	Styles, in the agent components section
`js/ws-agent.js`	`WsAgent.sourceChip()`, the JavaScript twin