TagChip

Interactive

See TagChip in Storybook for every variant, with live controls.

A category or label chip. Its colour is drawn from the 8-colour tag palette by index, never semantically.

import { TagChip } from "@kairosis/eidos";

<TagChip>postgres</TagChip>
<TagChip onRemove={() => remove("redis")}>redis</TagChip>;

Props

Prop	Type	Default	Description
children	ReactNode	—	Required. The label
colorIndex	1 – 8	hashed from the label	Palette slot
onRemove	() => void	—	Renders a remove button when provided

Guidelines

• By default the colour is a stable hash of the label, so postgres is the same colour on every screen and every session, with no colour registry to maintain.
• Pass colorIndex only when you need to control the assignment — e.g. matching a chart series.
• The palette is decorative. If the colour needs to mean something (healthy, failed), use Badge.
• The remove button is labelled Remove <tag>, so it's distinguishable when several chips are on screen.