Miltinson.Design system
GitHub

Badge

Small status label — default, signal, anchor, solid, and outline variants.

atomsSource
import { Badge } from '@elirobinson/react/components/atoms/Badge';

Styles: @elirobinson/react/styles/atoms/Badge.css — already included when you import @elirobinson/react/styles.css.

New
Show code
import { Badge } from '@elirobinson/react/components/atoms/Badge';

export default function Basic() {
  return <Badge>New</Badge>;
}

When to use it

Use Badge for a static status or category label — it's a <span>, not a control. Reach for Chip instead the moment the label needs to be removable or clickable.

  • default is the neutral workhorse for category tags.
  • signal is Miltinson Amber — reserve it for the one badge you most want noticed.
  • anchor ties to the Forest color family — use it for trust- and coaching-flavored content.
  • solid is high-contrast ink; use it sparingly, like a "New" marker.
  • outline is the quietest option, for a label that shouldn't compete for attention.

Variants

GuideFeaturedCoachingNewBeta
Show code
import { Badge } from '@elirobinson/react/components/atoms/Badge';

export default function Variants() {
  return (
    <div className="demo-row">
      <Badge variant="default">Guide</Badge>
      <Badge variant="signal">Featured</Badge>
      <Badge variant="anchor">Coaching</Badge>
      <Badge variant="solid">New</Badge>
      <Badge variant="outline">Beta</Badge>
    </div>
  );
}

Props

PropTypeDefaultDescription
variant"default" | "signal" | "anchor" | "solid" | "outline"default—

Also accepts all HTMLAttributes<HTMLSpanElement> props.

Accessibility

  • Renders a plain <span> with no implicit ARIA role — it's a visual label, not a live region.
  • If a badge shows a count or status that changes and the change matters to screen reader users, add role="status" (or similar) yourself — Badge doesn't announce updates on its own.
  • Non-interactive by design: no keyboard handling, no focus state.

Do

  • Use default for neutral category tags and outline for a quieter, low-emphasis label.
  • Reserve signal (amber) for the one badge you most want noticed on a screen.
  • Use anchor for trust- and coaching-flavored content — it’s tied to the Forest color family.
  • Keep badge text to one or two words; it’s a label, not a sentence.

Don't

  • Make a Badge clickable — reach for Chip or Button if it needs to respond to interaction.
  • Stack more than one solid badge in the same row; it reads as visual noise.
  • Use Badge to show a live, changing count without adding your own aria-label or role="status".
  • Put a badge color to work purely decoratively — each variant should mean something.