Making a text component clickable

Hi, new Retool user here still trying to figure things out! I want to have links to other apps within my Retool directory to enable clicking through my website, but I've found that the buttons are not really what I need and how I want it to look. The text components however are much more in line with how I want the links and tabs to look, but I've found no way to make them create an action or update a query. My question is this; is there a way to make a text component clickable so that I can make actions when it is clicked? I have used JavaScript before so if there's a way to insert an onClick function somewhere that would be great, I'm just not sure how to integrate JS with Retool just yet. Thanks!

Hi @saravid you can use some basic HTML to achieve this using the href tag to make text a hyperlink. Our text component filed accepts Markdown and HTML.

Here's an example:

Hope this helps!

Hi!

As far as I can tell there's no way to customize the hyperlink to not show underscore or another color when clicked, and that is not desirable for me. I'm also not sure where I would link for it to move my user through different parts of my website? How do I see what link I should put in for it to link properly in my "tree"?

I've tried customizing the button to be see through or to be white on white background, but it behaves differently than the text and I can't control the text size of the button. Is there a way to customize the button more maybe? Ideally I would be able to take the text component and make the entire area clickable, just like the button, but with all the control I have over the text in the text component. I'd also like to be able to run queries before linking if that is in any way possible.

You can always write custom CSS by going to the '...' menu > 'Scripts and Styles'

Here is an example of how you can change the font-size for the button class

Hopefully the Custom CSS and Styling docs can give you some idea of how to get started - https://docs.retool.com/docs/styling-new. This would be the best way to add custom styles to existing Retool components.

This is not working for me.

Retool is prepending the address of the app in the resulting URL.

Hi @bradleymathews, It looks like the links need to start with the protocol, otherwise what you've shared is the result. I'll pass along a report of this to our engineering team, thanks for flagging! Until we're able to ship an update, can you use a ternary inside the {{ }} to conditionally append the protocol to your URLs when it's not present?

That works.