ToolChip

Stable

A small tag in the message box showing a tool that is on, with a Remove button.

Also known as tool toggle, enabled tool

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

Web searchDeep research

const [tools, setTools] = useState(["Web search", "Deep research"]);

<div className="flex flex-wrap gap-2">
  {tools.map((t) => (
    <ToolChip key={t} label={t} icon={<GlobeIcon width={14} height={14} />}
      onRemove={() => setTools((l) => l.filter((x) => x !== t))} />
  ))}
  {tools.length === 0 && <span className="text-small leading-4 text-fg-muted">No tools on.</span>}
</div>

Pressing Remove takes the tag away.

Usage Code Design Accessibility

When to use it

Shows one tool that is switched on, such as Web search, right by the message box. People can see what the assistant will use and remove it in one step.

Made of: Icon · Label · Remove button

Use it for

Each tool that is turned on for the next message.
A tool that is locked on, shown without a Remove button.

Not for

Files or images attached to a message: use AttachmentChip.
Choosing which tools to turn on: use ToolMenu.
Showing what the chat is about: use ContextChip.

Do and avoid

Web search

Do. Shows the tool that is on and removes it in one step.

March invoice.pdf

Avoid. A file shown as a tool hides its size and upload state.

Do

Show a tag for every tool that is on, next to the text box.
Use the same icon as the tool has in ToolMenu.
Keep labels to one or two words.

Avoid

Do not use it for attached files. Use AttachmentChip.
Do not show a tag for a tool that is off.
Do not take away the button unless there is another way to turn the tool off.

On a phone

The chip is at least 32px tall and shortens a long label with an ellipsis, so it never grows wider than its container.
On touch screens the remove button keeps its size and has a 44px tap area, so the chip stays the same size.

Seen in products

Claude: the plus menu holds web search, which is switched on with a checkmark.
Perplexity: the input bar plus menu holds Deep Research and Create files and apps.
The survey's pattern is that active tools show as chips in the composer.

Properties

Prop	Type	Default	Description
labelrequired	string	none	Tool name. Also used in the remove button name.
icon	ReactNode	none	Leading icon. Decorative.
onRemove	() => void	none	Shows the remove button and handles its press.
removeLabel	string	Remove {label}	Overrides the remove button name.
className	string	none	Extra classes for the chip.

"Show code under the preview gives the code for the example on the stage."

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.

removable: Pass onRemove to show a small remove button on the right.
hover: The remove button gets a soft background under the pointer.
focus: The remove button shows a focus ring on keyboard focus.
truncated: A long label is cut off with an ellipsis.

Tokens

Change one of these and every part that uses it follows.

--surface-sunken
--border
--fg
--fg-muted
--surface-hover
--radius-control

Tags you can remove