Mention | Glaze design system

Form

When to use it

Use: A prompt or an answer points at one thing by name: a file, a run, a doc, a command.
Use: A chip in a message should read the same as the one the composer made.
Not for: The label says what kind of thing something is or how it stands. Use Badge.
Not for: The chip filters a list or shows a chosen value. Use Chip.

6 rules

Must: Store and send a mention as mentionToText(ref), and read text back with parseMentions. Because the [label](type:id) form survives any clipboard and comes back a chip; a hand-made "@label" loses the id, so two files with one name collapse.
Must: Pass a new chip's label through uniqueLabel(ref, taken) before you insert it. Because two different files called deploy.ts would read as one chip; uniqueLabel gives the second "deploy.ts (2)" and keeps the label of the same id.
Must: Set missing on a mention whose source is gone; never drop it from the text. Because removing it changes what the person wrote, and missing keeps the chip in place, struck through, and says so to a screen reader.
Never: Give a mention glass, a fill colour or a shadow; render it as a link or button with render when it opens the thing. Because a mention is a tag inside a line of text, and glass is the sign of something pressed.
Never: Type the slash into a command's label; type="command" draws it. Because the label would read "//refund" and the text form would carry the slash twice.
Should: Put removable mentions in a ul, ol, role="list" or role="group", and focus your field in onRemove when the last one goes. Because after a remove, focus moves to the next chip's remove button in the same list, and with none left the caller decides.

3 checks

: The chip reads as its label; a missing one adds "(no longer exists)".
: The remove button is named "Remove <label>"; its target is 28px though the chip is 20px.
: A linked mention is a real link, with the ink focus ring.

1 key

Enter, Space: On the remove button, removes the chip and moves focus to the next one.

4 edge cases

Long label: Truncates; a label over 24 characters keeps the whole name in its title.
Brackets, line breaks or emoji in a label: Escaped in the text form and read back unchanged.
A markdown link in the text: parseMentions leaves it as text; only known types become chips.
Right to left: The chip mirrors; the remove button sits at its end.

7 props

type: 'file' | 'folder' | 'doc' | 'table' | 'web' | 'command' | 'paste' | 'agent' | 'run' | 'deploy' | 'key' | 'model' default required
children: ReactNode default required
missing: boolean default false
onRemove: () => void
removeLabel: string default "Remove <label>"
render: ReactElement
mentionToText, parseMentions, uniqueLabel: functions

9 tokens