Add event handlers to prefix icons in Tags component

💬 App Building
1

I’m working with the Tags component and I’m wondering if it’s possible to add separate event handlers to the prefix icons.

Specifically, I’d like to know if there are distinct events so I can:

  • Detect when the X icon is clicked to delete the tag.

  • Detect when the rest of the tag is clicked, for example to open a popup and edit its content.

Any guidance or examples on how to achieve this would be greatly appreciated.

Thanks!

image
image430×142 4.57 KB

2

Hey @Miguel_Gonzalez_Herrera I don’t believe this is possible with the native tags component.

I think your best bet is to build your own. I would

  1. Create a horizontal listview
  2. Put a stack –> theme.automatic[i] for the background should work fairly well
  3. first put your desired icon –> attached desired event handler
  4. then on the right should be another component that allows for an event handler (icon text, button with all styling stripped away)
  5. remove all the padding and margin and just have like a 1-2px

The thing I don’t like about this solution is that there is a minimum height for stacks that is generally larger than I want the text to be

3

Thanks a lot for the clarification!

In the end, I decided to go with a custom component approach. I built a small React-based tag component where I expose two separate event handlers: one for removing the tag when clicking the X icon, and another for handling clicks on the rest of the tag to open a popup and edit its content. This gives me full control over the interactions and avoids the layout limitations of the native Tags component.

Appreciate the guidance — it pointed me in the right direction!

retool_forum
retool_forum493×121 2.27 KB

4

Happy to help! if its, your style, custom components can always be the easy button!

Good luck!