Badge

Small status label. Native <span> attributes and ref pass through.

New12 chipsBeta

import { SparkleIcon } from "@phosphor-icons/react";
import { Badge } from "@etched/reticle/badge";

export function Preview() {
  return (
    <div className="row">
      <Badge>New</Badge>
      <Badge variant="secondary">12 chips</Badge>
      <Badge variant="beta" icon={<SparkleIcon />}>
        Beta
      </Badge>
    </div>
  );
}

Installation

import { Badge } from "@etched/reticle/badge";

Examples

Semantic variants

primarysecondaryerrorwarningsuccessinfobetaoutline

import { Badge, type BadgeVariant } from "@etched/reticle/badge";

const semantic: BadgeVariant[] = ["primary", "secondary", "error", "warning", "success", "info", "beta", "outline"];

export function SemanticVariants() {
  return (
    <div className="row">
      {semantic.map((v) => (
        <Badge key={v} variant={v}>
          {v}
        </Badge>
      ))}
    </div>
  );
}

Color variants

neutralredgreenorangebluepurpletealteal-subtle

import { Badge, type BadgeVariant } from "@etched/reticle/badge";

const colors: BadgeVariant[] = ["neutral", "red", "green", "orange", "blue", "purple", "teal", "teal-subtle"];

export function ColorVariants() {
  return (
    <div className="row">
      {colors.map((v) => (
        <Badge key={v} variant={v}>
          {v}
        </Badge>
      ))}
    </div>
  );
}

Dot appearance

successwarningerrorneutral

import { Badge, type BadgeVariant } from "@etched/reticle/badge";

const dots: BadgeVariant[] = ["success", "warning", "error", "neutral"];

export function DotAppearance() {
  return (
    <div className="row">
      {dots.map((v) => (
        <Badge key={v} variant={v} appearance="dot">
          {v}
        </Badge>
      ))}
    </div>
  );
}

Icons, links and text

VerifiedNeeds reviewBetaView changelogRun 1,284 New

import { SparkleIcon } from "@phosphor-icons/react";
import { SuccessIcon, WarningIcon } from "../../icons.js";
import { Link } from "@etched/reticle/link";
import { Badge } from "@etched/reticle/badge";

export function IconsLinksAndText() {
  return (
    <div className="row">
      <Badge variant="success" icon={<SuccessIcon />}>
        Verified
      </Badge>
      <Badge variant="warning" icon={<WarningIcon />}>
        Needs review
      </Badge>
      <Badge variant="beta" icon={<SparkleIcon />}>
        Beta
      </Badge>
      <Link href="#badge" variant="plain">
        <Badge variant="outline">View changelog</Badge>
      </Link>
      <span>
        Run 1,284 <Badge variant="secondary">New</Badge>
      </span>
    </div>
  );
}

API reference

Prop	Type	Default	Description
variant	"primary" \| "secondary" \| "error" \| "warning" \| "success" \| "info" \| "beta" \| "outline" \| "red" \| "green" \| "neutral" \| "orange" \| "purple" \| "teal" \| "teal-subtle" \| "blue"	"primary"
children	ReactNode	–
appearance	"filled" \| "dot"	"filled"
icon	ReactNode	–	Icon element shown before the text, for example `<CheckIcon />`.