Badge

since v0.1.0

Compact status label — pill-shaped, mono uppercase, optional colored dot for state.

Set interactive to render an in-place pill toggle (role="button", keyboard

activation). For navigation or affordance-heavy use cases prefer wrapping a

non-interactive Badge inside a real <button> or <a> so the semantic

element does the lifting.

Forwards ref to the root <span>.

Install

Add the package and import the component.

pnpm add @hey-mike/tungsten

pnpm add @hey-mike/tungsten

import { Badge } from '@hey-mike/tungsten';

import { Badge } from '@hey-mike/tungsten';

Preview

Same fixtures used by the visual-regression suite.

Open snapshot in new view →

Usage

apps/docs/app/snapshots/badge/page.tsx

import { Badge } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';

export default function BadgeSnapshot() {
  return (
    <VariantGrid
      title="Badge"
      variants={[
        { label: 'default', node: <Badge>Default</Badge> },
        { label: 'brand', node: <Badge variant="brand">Brand</Badge> },
        { label: 'success', node: <Badge variant="success">Success</Badge> },
        { label: 'warning', node: <Badge variant="warning">Warning</Badge> },
        { label: 'error', node: <Badge variant="error">Error</Badge> },
        { label: 'info', node: <Badge variant="info">Info</Badge> },
      ]}
    />
  );
}

import { Badge } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';

export default function BadgeSnapshot() {
  return (
    <VariantGrid
      title="Badge"
      variants={[
        { label: 'default', node: <Badge>Default</Badge> },
        { label: 'brand', node: <Badge variant="brand">Brand</Badge> },
        { label: 'success', node: <Badge variant="success">Success</Badge> },
        { label: 'warning', node: <Badge variant="warning">Warning</Badge> },
        { label: 'error', node: <Badge variant="error">Error</Badge> },
        { label: 'info', node: <Badge variant="info">Info</Badge> },
      ]}
    />
  );
}

Props

Surface specific to <Badge />.

Prop	Type	Default	Description
variant	`"default" \| "brand" \| "success" \| "warning" \| "error" \| "info"`	`default`	—
emphasis	`"subtle" \| "strong"`	—	—
numericValue	`ReactNode`	—	Renders a nested numeric pill (split-pill layout, subtle emphasis only).
icon	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Optional leading icon. Replaces the status dot when provided.
interactive	`boolean`	`false`	—
disabled	`boolean`	`false`	—

Used in recipes