BoardCN

Badge

Counter pills and the Kbd shortcut hint.

Colors

Counter pills in neutral and primary.

124NewBeta
function BadgeColors() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Badge>12</Badge>
      <Badge color="primary">4</Badge>
      <Badge>New</Badge>
      <Badge color="primary">Beta</Badge>
    </div>
  );
}
function BadgeColors() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Badge>12</Badge>
      <Badge color="primary">4</Badge>
      <Badge>New</Badge>
      <Badge color="primary">Beta</Badge>
    </div>
  );
}

Installation

npx shadcn@latest add https://boardcn.dev/r/badge.json
npx shadcn@latest add https://boardcn.dev/r/badge.json

BoardCN dependencies

The CLI installs these for you — you do not need to add them yourself.

Source

The file the CLI copies into your project.

components/base/badges/badge.tsx
import type { HTMLAttributes, Ref } from "react";
import { cx, sortCx } from "@/utils/cx";

type BadgeColor = "primary" | "neutral";

export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  color?: BadgeColor;
  ref?: Ref<HTMLSpanElement>;
}

const styles = sortCx({
  base: "inline-flex items-center justify-center rounded-sm px-1 py-px text-caption-1-semibold tracking-normal whitespace-nowrap",
  color: {
    primary: "bg-accent-400 text-white",
    neutral: "bg-badge-neutral-background text-text-secondary",
  },
});

export function Badge({ color = "neutral", className, ref, ...props }: BadgeProps) {
  return (
    <span
      ref={ref}
      className={cx(styles.base, styles.color[color], className)}
      {...props}
    />
  );
}
import type { HTMLAttributes, Ref } from "react";
import { cx, sortCx } from "@/utils/cx";

type BadgeColor = "primary" | "neutral";

export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  color?: BadgeColor;
  ref?: Ref<HTMLSpanElement>;
}

const styles = sortCx({
  base: "inline-flex items-center justify-center rounded-sm px-1 py-px text-caption-1-semibold tracking-normal whitespace-nowrap",
  color: {
    primary: "bg-accent-400 text-white",
    neutral: "bg-badge-neutral-background text-text-secondary",
  },
});

export function Badge({ color = "neutral", className, ref, ...props }: BadgeProps) {
  return (
    <span
      ref={ref}
      className={cx(styles.base, styles.color[color], className)}
      {...props}
    />
  );
}

Props

Generated from the component's TypeScript types. Standard DOM and React Aria props are omitted.

Badge

PropTypeDefaultDescription
color"primary" | "neutral"neutral—