Fix badges after redesign (#1710)

Twixes · web-flow · commit be18c374512b · 2026-04-17T15:23:56.000+02:00
## Problem Badges got broken in the recent redesign: <img width="1230" height="828" alt="Screenshot 2026-04-17 at 15 09 58@2x" src="https://github.com/user-attachments/assets/19efef99-b2b9-4b59-b1b6-8a4c39050d9f" /> ## Changes Making them a bit nicer. Also following the existing conventions where badges have a border, whereas buttons do not: <img width="1230" height="840" alt="Screenshot 2026-04-17 at 15 09 27@2x" src="https://github.com/user-attachments/assets/a8aad411-ffe6-4bbb-a462-b25d6c1dffe8" />
diff --git a/apps/code/src/renderer/components/ui/Badge.tsx b/apps/code/src/renderer/components/ui/Badge.tsx
@@ -0,0 +1,31 @@
+import { cn } from "@posthog/quill";
+import { Badge as RadixBadge } from "@radix-ui/themes";
+import type { ComponentPropsWithoutRef } from "react";
+
+type RadixBadgeProps = ComponentPropsWithoutRef<typeof RadixBadge>;
+
+export type BadgeProps = RadixBadgeProps;
+
+/**
+ * Compact, uppercase badge built on Radix Badge.
+ * Applies the house style (`size="1"`, `variant="surface"`, small text, uppercase)
+ * so callers only need to pass `color` and children.
+ */
+export function Badge({
+  size = "1",
+  variant = "surface",
+  className,
+  ...props
+}: BadgeProps) {
+  return (
+    <RadixBadge
+      size={size}
+      variant={variant}
+      className={cn(
+        "!py-[3px] !px-[5px] !text-[9px] !leading-tight uppercase",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/apps/code/src/renderer/features/inbox/components/SignalSourceToggles.tsx b/apps/code/src/renderer/features/inbox/components/SignalSourceToggles.tsx
@@ -1,3 +1,4 @@
+import { Badge } from "@components/ui/Badge";
 import {
   ArrowSquareOutIcon,
   BrainIcon,
@@ -10,7 +11,6 @@ import {
   VideoIcon,
 } from "@phosphor-icons/react";
 import {
-  Badge,
   Box,
   Button,
   Flex,
@@ -221,14 +221,7 @@ export const EvaluationsSection = memo(function EvaluationsSection({
                 PostHog LLM Analytics
               </Text>
               <Tooltip content="This is only visible to staff users of PostHog">
-                <Badge
-                  color="blue"
-                  size="1"
-                  variant="surface"
-                  className="!py-0 !text-[9px] !leading-tight uppercase"
-                >
-                  Internal
-                </Badge>
+                <Badge color="blue">Internal</Badge>
               </Tooltip>
             </Flex>
             <Text size="1" style={{ color: "var(--gray-11)" }}>
@@ -373,16 +366,7 @@ export function SignalSourceToggles({
       <SignalSourceToggleCard
         icon={<VideoIcon size={20} />}
         label="PostHog Session Replay"
-        labelSuffix={
-          <Badge
-            color="orange"
-            size="1"
-            variant="surface"
-            className="!py-0 !text-[9px] !leading-tight uppercase"
-          >
-            Alpha
-          </Badge>
-        }
+        labelSuffix={<Badge color="orange">Alpha</Badge>}
         description="Analyze session recordings and event data for UX issues"
         checked={value.session_replay}
         onCheckedChange={toggleSessionReplay}
diff --git a/apps/code/src/renderer/features/inbox/components/detail/ReportDetailPane.tsx b/apps/code/src/renderer/features/inbox/components/detail/ReportDetailPane.tsx
@@ -1,3 +1,4 @@
+import { Badge } from "@components/ui/Badge";
 import { useAuthStateValue } from "@features/auth/hooks/authQueries";
 import {
   useInboxReportArtefacts,
@@ -24,7 +25,6 @@ import {
 } from "@phosphor-icons/react";
 import {
   AlertDialog,
-  Badge,
   Box,
   Button,
   Flex,
@@ -483,12 +483,7 @@ export function ReportDetailPane({ report, onClose }: ReportDetailPaneProps) {
                       </Text>
                       {isMe && (
                         <Tooltip content="You are a suggested reviewer">
-                          <Badge
-                            color="amber"
-                            size="1"
-                            variant="surface"
-                            className="!py-1 !text-[8px] !leading-tight"
-                          >
+                          <Badge color="amber" className="!py-1 !text-[8px]">
                             <EyeIcon
                               size={8}
                               weight="bold"
diff --git a/apps/code/src/renderer/features/inbox/components/utils/ReportCardContent.tsx b/apps/code/src/renderer/features/inbox/components/utils/ReportCardContent.tsx
@@ -1,9 +1,10 @@
+import { Badge } from "@components/ui/Badge";
 import { SignalReportActionabilityBadge } from "@features/inbox/components/utils/SignalReportActionabilityBadge";
 import { SignalReportPriorityBadge } from "@features/inbox/components/utils/SignalReportPriorityBadge";
 import { SignalReportStatusBadge } from "@features/inbox/components/utils/SignalReportStatusBadge";
 import { SignalReportSummaryMarkdown } from "@features/inbox/components/utils/SignalReportSummaryMarkdown";
 import { EyeIcon, LightningIcon } from "@phosphor-icons/react";
-import { Badge, Flex, Text, Tooltip } from "@radix-ui/themes";
+import { Flex, Text, Tooltip } from "@radix-ui/themes";
 import type { SignalReport } from "@shared/types";
 
 interface ReportCardContentProps {
@@ -41,13 +42,7 @@ export function ReportCardContent({
           />
           {report.is_suggested_reviewer && (
             <Tooltip content="You are a suggested reviewer">
-              <Badge
-                color="amber"
-                size="1"
-                variant="surface"
-                className="!py-0 !text-[9px] !leading-tight uppercase"
-                style={{ height: "var(--line-height-1)" }}
-              >
+              <Badge color="amber" style={{ height: "var(--line-height-1)" }}>
                 <EyeIcon size={10} weight="bold" className="shrink-0" />
               </Badge>
             </Tooltip>
diff --git a/apps/code/src/renderer/features/inbox/components/utils/SignalReportActionabilityBadge.tsx b/apps/code/src/renderer/features/inbox/components/utils/SignalReportActionabilityBadge.tsx
@@ -1,4 +1,4 @@
-import { Badge } from "@radix-ui/themes";
+import { Badge } from "@components/ui/Badge";
 import type { SignalReportActionability } from "@shared/types";
 import type { ReactNode } from "react";
 
@@ -27,14 +27,5 @@ export function SignalReportActionabilityBadge({
     return null;
   }
 
-  return (
-    <Badge
-      color={s.color}
-      size="1"
-      variant="surface"
-      className="!py-0 !text-[9px] !leading-tight uppercase"
-    >
-      {s.label}
-    </Badge>
-  );
+  return <Badge color={s.color}>{s.label}</Badge>;
 }
diff --git a/apps/code/src/renderer/features/inbox/components/utils/SignalReportPriorityBadge.tsx b/apps/code/src/renderer/features/inbox/components/utils/SignalReportPriorityBadge.tsx
@@ -1,4 +1,4 @@
-import { Badge } from "@radix-ui/themes";
+import { Badge } from "@components/ui/Badge";
 import type { SignalReportPriority } from "@shared/types";
 import type { ReactNode } from "react";
 
@@ -23,14 +23,5 @@ export function SignalReportPriorityBadge({
     return null;
   }
 
-  return (
-    <Badge
-      color={PRIORITY_COLOR[priority]}
-      size="1"
-      variant="surface"
-      className="!py-0 !text-[9px] !leading-tight uppercase"
-    >
-      {priority}
-    </Badge>
-  );
+  return <Badge color={PRIORITY_COLOR[priority]}>{priority}</Badge>;
 }
diff --git a/apps/code/src/renderer/features/inbox/components/utils/SignalReportStatusBadge.tsx b/apps/code/src/renderer/features/inbox/components/utils/SignalReportStatusBadge.tsx
@@ -1,5 +1,6 @@
+import { Badge } from "@components/ui/Badge";
 import { inboxStatusLabel } from "@features/inbox/utils/inboxSort";
-import { Badge, Tooltip } from "@radix-ui/themes";
+import { Tooltip } from "@radix-ui/themes";
 import type { SignalReportStatus } from "@shared/types";
 
 const STATUS_TOOLTIPS: Record<string, string> = {
@@ -47,12 +48,7 @@ export function SignalReportStatusBadge({
 
   return (
     <Tooltip content={tooltip}>
-      <Badge
-        color={color}
-        size="1"
-        variant="surface"
-        className="!py-0 !text-[9px] !leading-tight cursor-help uppercase"
-      >
+      <Badge color={color} className="cursor-help">
         {label}
       </Badge>
     </Tooltip>
diff --git a/apps/code/src/renderer/features/sidebar/components/items/HomeItem.tsx b/apps/code/src/renderer/features/sidebar/components/items/HomeItem.tsx
@@ -1,6 +1,7 @@
+import { Badge } from "@components/ui/Badge";
 import { Tooltip } from "@components/ui/Tooltip";
 import { EnvelopeSimple, Plus } from "@phosphor-icons/react";
-import { Badge, type ButtonProps } from "@posthog/quill";
+import type { ButtonProps } from "@posthog/quill";
 import {
   formatHotkey,
   SHORTCUTS,
@@ -73,7 +74,7 @@ export function InboxItem({ isActive, onClick, signalCount }: InboxItemProps) {
           }
           isActive={isActive}
           onClick={onClick}
-          endContent={<Badge variant="warning">Beta</Badge>}
+          endContent={<Badge color="amber">Beta</Badge>}
         />
       </div>
     </Tooltip>
