Outline Badge

outline x pill

Minimal outline-styled badge with rounded pill shape. From Bundui.

badgeoutlinepillbundui

DesignReactNew

Code

badge-outline.tsx

export function Badge({ children, accent = false }: { children: React.ReactNode; accent?: boolean }) {
  return (
    <span className={accent
      ? "rounded-full border border-brand/50 px-3 py-1 text-xs font-medium text-brand"
      : "rounded-full border border-border px-3 py-1 text-xs font-medium"}>
      {children}
    </span>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Outline Badge component and wire it to my accent.”