Fluxify a button to copy text (url)

[GuidoVeltmaat]

I have a working button "copy link", that, when clicked, copies a url to the clipboard and, for 4 seconds, shows a "copied!" message inside this same button with corresponding icon.
The code im using is with x-if templates containing spans. But i wonder: Is there not be an easier and shorter way in Flux button? As <flux:button /> now has icon="link" and icon="check" for example.

<script src="https://cdn.jsdelivr.net/npm/@ryangjchandler/[email protected]/dist/alpine-clipboard.js" defer></script>
@fluxStyles
</head>
...
<flux:button size="sm" type="button"
  x-data="{ copied: false }"
  x-clipboard="'https://website.com'"
  @click="copied = true; setTimeout(() => { copied = false; }, 4000)"
  >
  <template x-if="!copied">
    <span class="flex items-center space-x-2">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
        </svg>
        <span>copy link</span>
    </span>
  </template>
  <template x-if="copied">
    <span class="flex items-center space-x-2">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
        <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
      </svg>
      <span>copied!</span>
    </span>
  </template>
</flux:button>

Maybe its more related to alpineJS(?) But i cant seem to figure it out trying this to switch to Flux.

[jeffchown]

@GuidoVeltmaat How about using a readonly input with the copyable attribute?
See: https://fluxui.dev/components/input#clearable-copyable-and-viewable-inputs

[GuidoVeltmaat]

Thank you @jeffchown, i have tried your suggestion and yes, way simpler and even all in 1 line!

The only question i have with this solution, is that i wonder if its semantically correct. As this has now become a input field, with a button in it. But the value inside is not really a editable field, but in my case its the link i provided.

I guess im looking more to a solution we have here on github to copy code for example: 1 button to copy code
.

Hope this makes it any clearer? For now i will start using your suggestion.

[jeffchown]

I understand what you are saying, @GuidoVeltmaat - in this case, I tend to opt towards the simplest approach.

You could choose to make the input disabled (instead of readonly) to at least make sure it is not included in the POST values returned when the form is submitted.

If you want to stick with the GitHub style paste button, why not make your own custom component using the Alpine code from above?

[GuidoVeltmaat]

ALright ill go with that.