The Kit/Components/Badge

Badge

Status chips with tone semantics (accent, good, warn, bad, neutral) in each language: lit signal chip, hairline broadsheet tag, solid painted block.

theme-aware · one self-contained file per variantMIT · copy freely

Apex

Racing-instrument console on layered indigo · proven in F1Peak · see the whole Apex set
loading…
Apex.tsx
"use client";
import * as React from "react";

/* Apex Badge - instrument status chip: mono caps, tinted fill, lit signal dot. */

export function Badge({ tone = "neutral", children }: { tone?: "accent" | "good" | "warn" | "bad" | "neutral"; children: React.ReactNode }) {
  const c = tone === "accent" ? "var(--accent)" : tone === "neutral" ? "var(--ink-dim)" : `var(--${tone})`;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 5,
      fontFamily: "var(--font-mono)", fontSize: 10.5, fontWeight: 600,
      textTransform: "uppercase", letterSpacing: "0.08em",
      padding: "3px 9px", borderRadius: 999, color: c,
      background: `color-mix(in srgb, ${c} 16%, transparent)`,
      border: `1px solid color-mix(in srgb, ${c} 40%, transparent)`,
    }}>
      {tone !== "neutral" && (
        <span style={{
          width: 5, height: 5, borderRadius: 999, background: c,
          boxShadow: `0 0 5px ${c}`, flex: "0 0 auto",
        }} />
      )}
      {children}
    </span>
  );
}

Tifo

Matchday broadsheet on near-black · proven in World Cup 26 · see the whole Tifo set
loading…
Tifo.tsx
"use client";
import React from "react";

/* Tifo Badge - flat broadsheet chip: sharp corners, hairline tone border, mono caps. */

export function Badge(props: {
  tone?: "accent" | "good" | "warn" | "bad" | "neutral";
  children: React.ReactNode;
}) {
  const { tone = "neutral", children } = props;
  const c: string = {
    accent: "var(--accent)",
    good: "var(--good)",
    warn: "var(--warn)",
    bad: "var(--bad)",
    neutral: "var(--ink-dim)",
  }[tone];

  return (
    <span style={{
      display: "inline-flex", alignItems: "center", borderRadius: 3,
      fontFamily: "var(--font-mono)", textTransform: "uppercase",
      fontSize: 10.5, letterSpacing: "0.04em", fontWeight: 600, lineHeight: 1,
      padding: "4px 7px", background: "var(--surface-2)",
      border: `1px solid color-mix(in srgb, ${c} 45%, var(--line))`,
      color: c,
    }}>{children}</span>
  );
}

Ink

Painted poster plates on deep oil-blue · born in the library · see the whole Ink set
loading…
Ink.tsx
"use client";
import React from "react";

/* Ink Badge - solid painted chip: square tone block + caps label, tiny cel step.
   No tinting tricks, no glow - flat committed colour. */

export function Badge(props: {
  tone?: "accent" | "good" | "warn" | "bad" | "neutral";
  children: React.ReactNode;
}) {
  const { tone = "neutral", children } = props;
  const c: string = {
    accent: "var(--accent)",
    good: "var(--good)",
    warn: "var(--warn)",
    bad: "var(--bad)",
    neutral: "var(--ink-dim)",
  }[tone];

  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 7,
      fontFamily: "var(--font-display)", textTransform: "uppercase",
      fontSize: 11, letterSpacing: "0.07em", fontWeight: 700, lineHeight: 1,
      padding: "4px 8px", background: "var(--surface-2)", color: "var(--ink)",
      boxShadow: `2px 2px 0 color-mix(in srgb, var(--bg) 40%, #000)`,
      borderRadius: 2,
    }}>
      <span style={{ width: 7, height: 7, background: c, boxShadow: `1.5px 1.5px 0 color-mix(in srgb, ${c} 55%, #000)`, flex: "0 0 auto" }} />
      {children}
    </span>
  );
}

Also in components: Button · Card · Input