diff --git a/packages/react/src/shadcn/ui/badge.tsx b/packages/react/src/shadcn/ui/badge.tsx
index 944f3c72b..0fac50dd4 100644
--- a/packages/react/src/shadcn/ui/badge.tsx
+++ b/packages/react/src/shadcn/ui/badge.tsx
@@ -4,22 +4,22 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-  "focus:ring-ring inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+  " inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
   {
     variants: {
       variant: {
         default:
-          "border-transparent bg-primary-9 text-primary-12 shadow hover:bg-primaryA-4",
+          "border-transparent bg-primary-9 text-primary-12 shadow hover:bg-primaryA-4 focus:ring-primary-8",
         primary:
-          "border-transparent bg-primary-9 text-primary-12 shadow hover:bg-primaryA-4",
+          "border-transparent bg-primary-9 text-primary-12 shadow hover:bg-primaryA-4 focus:ring-primary-8",
         secondary:
-          "border-transparent bg-secondary-9 text-secondary-12 hover:bg-secondaryA-4",
+          "border-transparent bg-secondary-9 text-secondary-12 hover:bg-secondaryA-4 focus:ring-secondary-8",
         outline:
-          "text-base-12", // Assuming the foreground is a high-contrast text of base color
+          "text-base-12 focus:ring-base-8", // Assuming the foreground is a high-contrast text of base color
       },
       size: {
         default: "px-2.5 py-0.5 text-xs",
-        sm: "py-0.25 px-1.5 text-xs",
+        sm: "px-1.5 text-xs",
         lg: "px-3 py-1 text-sm",
       },
     },