copyToClipboard() next to text

I wants to add some link/text next to text to copy the content.
I saw that you can add a button with utils.copyToClipboard() event on click I'm having two problems with this solution:

  • you have too much margin
  • in case of textarea, I don't know where to put the button



Is there any way to use utils.copyToClipboard() in the text itself?
I was thinking like to add an icon at the end of the text with a link that trigger this event.


Unfortunately, the text component doesn't have event handlers so you can't just do an 'onClick' copy text to clipboard.

you could look into using the link component which does have it, but you are much more limited on your styling then.

the other option would likely be using a table to copy the cells' data.

hope that helps!

Unfortunately I can't use tables here: I'm in the ListView component.
Also i think that with tables i've the same issue in terms of margin between the text and the button.

What about position?
Is there any easy way to overlap components?
I imagine with custom css, but I don't think make sense for this.

You might also try using an HTML component to render your text, which supports adding click handlers to specific elements within the component. The docs have a more detailed and general explanation.

In your case, you might specify the type property of each element when you specify it as a click target, and then access that property in the click handler:

Let me know if that works!
html_click_handler (1).json

1 Like

@Kabirdas Yes, this works like a charm!

I think I can even add an icon in the html inside a span and make "clickable" only the icon.

For the title of the container there's no solution right?


Edit: nvm, i saw that it's possible to add html also in the container title. Great!