AI primitive

ContextBadge

Small chip representing a piece of attached context (a file, a URL, a previous message). Removable by default, with file-type icons.

Usage

Pick your edition with the tabs. Selection syncs across all docs.

tsx

import { ContextBadge } from '@/components/molecules'

<ContextBadge
  label="pricing.md"
  kind="file"
  onRemove={() => removeContext('c1')}
/>

Same surface in both editions; HTML version exposes equivalents through Alpine x-data.

Prop	Type	Default	Description
label	string	—	Visible chip text.
kind	"file" \| "url" \| "message" \| "code"	"file"	Determines the icon.
onRemove	() => void	—	Render the × button when provided.