ContextChip
StableA small tag near the message box that shows what the chat is about.
Also known as context pill, context chip, mention chip, attached context
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Picker and removable
<div className="flex flex-wrap items-center gap-2">
<ContextChip icon={<GlobeIcon width={14} height={14} />} onClick={() => {}}>All sources</ContextChip>
<ContextChip icon={<FileIcon width={14} height={14} />} onClear={() => {}}>Q3 planning.pdf</ContextChip>
</div>The first tag opens a list of choices. The second is something attached that the person can remove.
When to use it
Shows what the chat is about, right beside the message box. It can open choices, be removed, or simply sit there as a label.
Made of: Icon · Label · Arrow (for choices) · Remove button
Use it for
- Showing the project, file or folder the chat is limited to.
- Letting a person change that scope: give it onClick to open choices.
- Letting a person drop the scope: give it onClear.
Not for
- Ready-made questions to send: use SuggestionChips.
- A file attached to one message: use AttachmentChip.
- A status or category label: use Badge.
Do and avoid
Do
- Make it pressable when the topic can be changed. Add a remove button when it can be removed.
- Keep labels to a few words, like a file name.
- Put tags in one row near the message box.
Avoid
- Do not make a tag both pressable and removable unless both make sense.
- Do not use it for tags or filters in a table. It is only for the message box.
- Do not use very long file names. Shorten them first.
On a phone
- On touch screens the pill stays 28px tall. Its clear button, and the pill itself when it is a button, keep their size and have a 44px tap area.
- It has no hover-only parts: the picker opens on tap and the clear button is always shown.
- The label has no truncation, so keep it short for a narrow screen.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | none | Label text. |
| icon | ReactNode | none | Leading icon in the subtle foreground colour. |
| onClick | () => void | none | Turns the pill into a button and adds a chevron. Use it to open a picker. |
| onClear | () => void | none | Adds a clear button after the pill. The pill itself then has no border. |
| className | string | none | Extra classes for the pill body. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one ContextChip switches all of this from its properties panel, across 4 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| State | Hover, Pressed and Focus come from the browser. | Default, Hover, Pressed, Focus |
| Text | children | Any text |
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- hover
- When onClick is set, the pill gets a soft background under the pointer.
- focus
- When onClick or onClear is set, those buttons show a focus ring on keyboard focus.
- clearable
- Pass onClear to add a small clear button inside a shared rounded background.
Tokens
Change one of these and every part that uses it follows.
--border--surface--surface-hover--fg--fg-subtle--radius-control
Built in
- With onClick it is a real button. Without it, it is plain text and the Tab key skips it.
- The remove button is a real button named "Clear context".
- The arrow and the remove cross are hidden from screen readers. The label is read.
- After the tag is cleared, keyboard focus moves to what is left of the pill, else the next control, else the message box. Pass focusAfterClear to choose another place.
What you need to do
- When the pill opens choices, move focus into them, because the choices are yours.
- When there is more than one removable tag, give each a clearLabel that says what it clears, such as "Clear project Atlas".
- Pass an icon that is hidden from screen readers, so only the label is read.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide