feat(F0Button): show a counter on buttons, styled right

packages/react/src/components/F0Button/__tests__/F0Button.test.tsx

@@ -97,4 +97,21 @@ describe("F0Button", () => {
     expect(button).not.toBeDisabled()
     expect(onError).toHaveBeenCalled()
   })
+
+  describe("counter", () => {
+    it("renders the counter value", () => {
+      render(<F0Button label="To review" counterValue={3} />)
+      expect(screen.getByText("3")).toBeInTheDocument()
+    })
+
+    it("tightens the button's right padding when a counter is present", () => {
+      render(<F0Button label="To review" size="md" counterValue={3} />)
+      expect(screen.getByRole("button").className).toContain("[&_.main]:!pr-2")
+    })
+
+    it("keeps padding symmetric when there is no counter", () => {
+      render(<F0Button label="Review" size="md" />)
+      expect(screen.getByRole("button").className).not.toContain("!pr-2")
+    })
+  })
 })

packages/react/src/components/F0Button/internal-types.ts

@@ -50,7 +50,7 @@ export type ButtonInternalProps = Pick<
      */
     variant?: ActionButtonVariant
     /**
-     * The filters'counter value to display.
+     * A count shown in a neutral counter to the right of the label.
      */
     counterValue?: number
     /**

packages/react/src/components/F0Button/internal.tsx

@@ -123,6 +123,17 @@ const ButtonInternal = forwardRef<
       className={cn(
         "max-w-full",
         block && "w-full",
+        // A trailing counter has its own bordered edge, so the button's right
+        // padding tightens 4px (Figma "ButtonCounter"); the left is unchanged.
+        // Important because the override and the size variant's `px` both target
+        // `.main` as arbitrary variants, which tailwind-merge leaves unmerged —
+        // so the cascade, not class order, has to decide, and `!` guarantees it.
+        counterValue !== undefined &&
+          {
+            sm: "[&_.main]:!pr-1",
+            md: "[&_.main]:!pr-2",
+            lg: "[&_.main]:!pr-3",
+          }[size],
         withoutDisabledAppearance &&
           disabled &&
           "disabled:pointer-events-none disabled:opacity-100 disabled:cursor-default [&[aria-disabled=true]]:opacity-100 [&[aria-disabled=true]]:cursor-default",
@@ -172,7 +183,17 @@ const ButtonInternal = forwardRef<
         {iconPosition === "right" && iconNode}
         {append}{" "}
         {counterValue && (
-          <Counter value={counterValue} size="sm" type="selected" />
+          <span
+            className={cn(
+              "ml-1 inline-flex items-center",
+              // The default (primary) button is a solid dark-red field, so the
+              // light counter would wash out. Forcing the dark theme onto just
+              // the counter gives it a dark pill regardless of the app theme.
+              variant === "default" && "dark"
+            )}
+          >
+            <Counter value={counterValue} size="sm" type="default" />
+          </span>
         )}
       </div>
     </Action>