Implementation:OpenHands OpenHands Chip
| Knowledge Sources | |
|---|---|
| Domains | UI_Components, React |
| Last Updated | 2026-02-11 21:00 GMT |
Overview
A small, non-interactive label component that displays a colored tag in either pill or rectangular shape.
Description
The Chip component renders a compact, styled label used to categorize, tag, or highlight information. It supports six color options via the ChipColor type and two shape variants via ChipVariant: "pill" (fully rounded) and rectangular. The component is lightweight at only 37 lines of source code, making it a simple display-only element without built-in interactivity.
Usage
Use the Chip to display status labels, tags, categories, or metadata badges. It is appropriate for read-only indicators such as task status, severity levels, or content categories. For chips that respond to user interaction (click, dismiss), use the InteractiveChip component instead.
Code Reference
Source Location
openhands-ui/components/chip/Chip.tsx (37 lines)
Signature
interface ChipProps {
color?: ChipColor;
variant?: ChipVariant;
children: React.ReactNode;
}
Import
import { Chip } from "@openhands/ui";
I/O Contract
Inputs (Props)
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
color |
ChipColor (6 colors) |
No | — | The background/text color scheme of the chip. |
variant |
ChipVariant ("pill" | rectangular) |
No | — | Controls the border radius style: fully rounded pill or rectangular with slight rounding. |
Outputs
Renders a compact, styled <span> element displaying the children content with the specified color and shape.
Usage Examples
import { Chip } from "@openhands/ui";
function TaskStatus() {
return (
<div>
<Chip color="green" variant="pill">Active</Chip>
<Chip color="red" variant="pill">Error</Chip>
<Chip color="blue">In Progress</Chip>
</div>
);
}