Efniv0.1

Components

Tag

Categorical chip. Consumes the tag palette — 10 hues with no fixed meaning, so users can assign a color to whatever concept they want (project, priority, area).

When to usefor user-assigned categories: labels, priorities, projects, teams — anywhere hue is a shortcut for identity, not for status.

Import

import { Tag } from "@ravnhq/efni/tag"

Subtle (default)

rosefuchsiapurpleindigocyanteallimeamberbronzegray
<Tag hue="rose">rose</Tag>
<Tag hue="fuchsia">fuchsia</Tag>
<Tag hue="purple">purple</Tag>
{ /* rose, fuchsia, purple, indigo, cyan, teal,
     lime, amber, bronze, gray */ }

With leading dot

rosefuchsiapurpleindigocyanteallimeamberbronzegray
<Tag hue="cyan" dot>on call</Tag>

Solid

rosefuchsiapurpleindigocyanteallimeamberbronzegray
<Tag hue="indigo" variant="solid">Priority 1</Tag>

Sizes

sm (default)mdmd with dot
<Tag hue="teal" size="sm">sm</Tag>
<Tag hue="teal" size="md">md</Tag>

In context

MB-4472Refuel pass, launch pad 3
launchP1

Guidelines

Do
  • Let users assign hue themselves — the palette is categorical, not semantic.
  • Pair the subtle variant with a leading dot when the hue itself needs to be legible from far away.
  • Reach for Badge, not Tag, when the color has meaning (status, count).
Don't
  • Don't use tag hues for status — that's what the status token families are for.
  • Don't stack more than 3 tags in a row; group them or truncate.
  • Don't invent new hues by mixing surface/border/text from different families.

Props

PropTypeDefaultDescription
hue"rose" | "fuchsia" | "purple" | "indigo" | "cyan" | "teal" | "lime" | "amber" | "bronze" | "gray""gray"Categorical color. Consumes the tag palette tokens.
variant"subtle" | "solid""subtle"Fill style. Solid uses the hue's solid token as the background.
size"sm" | "md""sm"Height and text size.
dotboolean—Show a small dot leading the label. Subtle variant only.
…propsReact.ComponentProps<"span">—Everything Tag passes to the element it renders.