▚termino
~/docs/custom/badge

▚Badgecustom

Tone-colored status pill built from box + text

~/custom/badge
live
$ termino badge
tones
blue example usage
cyan example usage
green example usage
yellow example usage
red example usage
magenta example usage
gray example usage
status bar ● ready ● 2 warnings ● 1 error

##API

Pure presentational component with 7 built-in tones.

properties
proptypedefaultdescription
labelstring-Badge text
toneblue | cyan | green | yellow | red | magenta | gray"blue"Color pair (bg + fg)
prefixstring""Optional glyph prefix, e.g. '● '

##Keymap

~/keymap
—Display only

##Notes

  • ▸Tones are static hex pairs — no runtime color parsing, no allocations.
  • ▸Compose into status bars or table cells as nested children.

##Source

Real implementation — this is the code that runs in your terminal.

tsxbadge.tsx
1import { createElement as h } from "react";
2
3const TONES = {
4  blue: { bg: "#1f3a5f", fg: "#7aa2f7" },
5  cyan: { bg: "#1f3a3a", fg: "#7dcfff" },
6  green: { bg: "#1f3a2e", fg: "#9ece6a" },
7  yellow: { bg: "#3a2e1f", fg: "#e0af68" },
8  red: { bg: "#3a1f28", fg: "#f7768e" },
9  magenta: { bg: "#2e1f3a", fg: "#bb9af7" },
10  gray: { bg: "#24283b", fg: "#a9b1d6" },
11} as const;
12
13export type BadgeTone = keyof typeof TONES;
14
15export interface BadgeProps {
16  label: string;
17  tone?: BadgeTone;
18  prefix?: string;
19}
20
21export function Badge({ label, tone = "blue", prefix = "" }: Readonly<BadgeProps>) {
22  const t = TONES[tone];
23  return h(
24    "box",
25    { style: { backgroundColor: t.bg, paddingLeft: 1, paddingRight: 1 } },
26    h("text", { fg: t.fg }, prefix + label),
27  );
28}
29
← ProgressBar
Animated progress bar with label and percentage
Toast →
Toast provider with queue, tones, and auto-dismiss