Propel

Badge

A small rounded pill of inline text for statuses, labels, and counts.

Basic

Badge
Show code
import { Badge } from "@makeplane/propel/components/badge";

export default function BasicDemo() {
  return <Badge label="Badge" tone="neutral" magnitude="md" />;
}

Tones

The tone axis carries both semantic color (success, warning, danger) and decorative hues.

neutralgreybrandinfoindigosuccessemeraldwarningyellowdangercrimsonorange
Show code
import { Badge, type BadgeTone } from "@makeplane/propel/components/badge";

const TONES: BadgeTone[] = [
  "neutral",
  "grey",
  "brand",
  "info",
  "indigo",
  "success",
  "emerald",
  "warning",
  "yellow",
  "danger",
  "crimson",
  "orange",
];

export default function TonesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {TONES.map((tone) => (
        <Badge key={tone} tone={tone} magnitude="md" label={tone} />
      ))}
    </div>
  );
}

Magnitudes

smmdlg
Show code
import { Badge, type BadgeMagnitude } from "@makeplane/propel/components/badge";

const MAGNITUDES: BadgeMagnitude[] = ["sm", "md", "lg"];

export default function MagnitudesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {MAGNITUDES.map((magnitude) => (
        <Badge key={magnitude} tone="brand" magnitude={magnitude} label={magnitude} />
      ))}
    </div>
  );
}

With icon

DonePro
Show code
import { Badge } from "@makeplane/propel/components/badge";
import { Icon } from "@makeplane/propel/components/icon";
import { Check, Sparkles } from "lucide-react";

export default function WithIconDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Badge tone="success" magnitude="md" startIcon={<Icon icon={Check} />} label="Done" />
      <Badge tone="brand" magnitude="md" endIcon={<Icon icon={Sparkles} />} label="Pro" />
    </div>
  );
}

Installation

import { Badge } from "@makeplane/propel/components/badge";

Props

Badge

PropTypeRequiredDescription
renderReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>NoAllows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
magnitude"sm" | "md" | "lg"Yes
tone"neutral" | "grey" | "brand" | "info" | "indigo" | "success" | "emerald" | "warning" | "yellow" | "danger" | "crimson" | "orange"Yes
labelstringNoThe badge label text.
startIconReactNodeNoElement rendered before the label (inline-start), e.g. `<Icon icon={Check} />`.
endIconReactNodeNoElement rendered after the label (inline-end), e.g. `<Icon icon={Sparkles} />`.