Customer account extension: primary button with badge display issue

Extensions
1

Hello!

There seems to be an visual issue when using a badge inside a primary button. The badge turns white on white:

image
image1036×180 10.5 KB

Looks fine with a secondary button:

image
image1018×174 10.2 KB

Code example:

<s-button
  variant={tab === activeTab ? "primary" : "secondary"}
  href={routeToPath({ tab, mode: "list" } as Route)}
>
  {tab === "queue" && hasPending ? (
    <s-stack direction="inline" gap="small-200" alignItems="center">
      {TAB_LABELS[tab]}
      <s-badge tone="auto">{pendingLabel}</s-badge>
    </s-stack>
  ) : (
    TAB_LABELS[tab]
  )}
</s-button>
2

Thanks for the detailed report and clear repro, @Tommy_Gaudreau! You’re right that the badge loses contrast inside a primary button — we’ve flagged this to the team that owns these components to investigate. In the meantime, using a secondary button (as you noted) is a good workaround for keeping the badge visible.