Gesso
Components

Badge

Small status and label marks — not Chip.

Small status marks ported from Atlas. Badge uses shadcn color names, so every role variant repaints with the look. It renders a <span>, so it nests validly inside buttons, cells, and other inline content.

For filter labels, selected values, and combobox chips (including dismiss), see Chip.

DefaultSecondaryDestructiveOutlineGhostLinkMuted

Active

  • Badge — seven role variants, asChild for wrapping links.
  • CircleBadge — an 8px status dot; pair with adjacent text.

Categorical color (variant="tag")

The tag variant sets no role color — a caller injects a per-value hue via style. The data layer's PropertyTag uses this for grid select options. Role badges follow the theme; categorical tags must not.

Install

shadcn add @gesso/badge

On this page