Badge

Interactive

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

A small pill for status. Semantic — the colour carries meaning.

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

<Badge tone="success" dot>
  Healthy
</Badge>;

Props

Prop	Type	Default	Description
tone	"neutral" | "primary" | "secondary" | "success" | "warning" | "danger"	"neutral"
dot	boolean	false	Leading status dot in the badge's own colour
children	ReactNode	—	Label

Also accepts every <span> attribute.

Guidelines

• Badge is for status (Healthy, Failed, Running). For a category or free-form label, use TagChip, whose colour is assigned by index and means nothing.
• Never encode meaning in colour alone — dot plus a word survives colour blindness and greyscale.
• Keep it to a word or two. It's a pill, not a sentence.