How to get click action in a text

🎈 Using Streamlit
1

How can I use a text with the same function of a button, being able to get the click actions.

For example:

I would have a text like this one below where I could click and get the click action using an IF condition.

check_changes = st.markdown("<div><a href=#>Check Changes</a></div>",unsafe_allow_html=True)

if check_changes:
      print('text was clicked, do actions')

Is it possible to do something like that ?

1 Like
2

You can use the st.write function in Streamlit to display text and also make it clickable.

st.write("<a href='#' id='my-link'>Click me</a>", unsafe_allow_html=True)

if st.button("my-link"):
    st.write("Link clicked!")
1 Like
3

If I use a st.button("my-link") It creates a button in the screen. I wouldn’t like to create a button to be clicked. I’d like to just have the ‘text’ clickable with action.

4

One option is to use css to format the button to look like text, like this

5

Thanks, this strategy works! Is it possible to apply the style to just this button ? Instead of applying to all button class?

6

One way to do this is to set type="primary" and to only change the “primary” buttons

7

I am sorry for bothering you. But it seems like there is only blank space after you say “like this”. Could you please share the details again?

8

It’s an embedded streamlit app, but maybe it’s not showing up for you for some reason. Here’s the app code

import streamlit as st

if st.button("Click me", type="primary"):
    st.write("Clicked")

st.button("Another button!")

st.markdown(
    """
    <style>
    button[kind="primary"] {
        background: none!important;
        border: none;
        padding: 0!important;
        color: black !important;
        text-decoration: none;
        cursor: pointer;
        border: none !important;
    }
    button[kind="primary"]:hover {
        text-decoration: none;
        color: black !important;
    }
    button[kind="primary"]:focus {
        outline: none !important;
        box-shadow: none !important;
        color: black !important;
    }
    </style>
    """,
    unsafe_allow_html=True,
)