How to create a dynamic clicable hyperlink or button in Streamlit?

🎈 Using Streamlit
1

Hi Everyone,

I am excited that I’m making my first Streamlit app :smiley:

I ran into a problem though.

How can I create a link in Streamlit that can take a dynamic user generated parameter?

The following thread Html tags in streamlit - Using Streamlit - Streamlit suggests using

st.write("check out this [link](https://share.streamlit.io/mesmith027/streamlit_webapps/main/MC_pi/streamlit_app.py)")

but it doesn’t work if say I have my link saved in a variable.

What I mean is

> url = https://www.github.com
> st.write("check out this [link](url)")

doesn’t work.

Thank you for your help.

1 Like
2

Hey @RajivSingha,

First, welcome to the Streamlit community!!! :partying_face: :partying_face: :tada: :sparkles: :tada:

So this isn’t working because you’re writing a string, and in python when you want to insert a variable into a string you use a % notation. Check out the 2 additional options you have for making this work:

url = "https://share.streamlit.io/mesmith027/streamlit_webapps/main/MC_pi/streamlit_app.py"
st.write("check out this [link](%s)" % url)

st.markdown("check out this [link](%s)" % url)

Hope this helps!

Happy Streamlit-ing!
Marisa

6 Likes
3

Hi, is there any way for me to change color of the hyperlink, like from blue to white?

4

I think you can inject CSS, like:

change_link_color = """
    <style>
     a:link {
       color: green;
       background-color: transparent;
       text-decoration: none;
     }
    </style>
    """
st.markdown(change_link_color , unsafe_allow_html=True)