Copy button using slot="accessory" in <s-text-field> not working and misaligned

Polaris
1

Hi team,

I’m facing an issue while trying to add a copy button inside an <s-text-field> using the accessory slot. Here’s the code I’m using:

<s-text-field
  value={i18n.translate(`${i18nPrefix}.manualLocationSnippet`)}
  disabled
>
  <div style={{ display: "contents" }} slot="accessory">
    <s-button
      variant="tertiary"
      icon="clipboard"
      type="button"
      onClick={onCopy}
    />
  </div>
</s-text-field>

Problems I’m seeing:

  1. The button appears visually misaligned on hover.
  2. The onClick function on <s-button> is not triggering.
  3. I’m using Shopify Polaris Web Components.

Visual References:

  • Code snippet in UI:
    image

  • Button hover misalignment:
    image

If anyone has an alternative way to:

  • Show a copy-to-clipboard button inside a <s-text-field> (as a suffix or in the accessory slot),
  • Or a workaround to get the button functional and aligned properly,

please share your approach. Any help would be appreciated!

Thanks in advance!