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
Renan_Nogueira:
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.
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
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.
One option is to use css to format the button to look like text, like this
Thanks, this strategy works! Is it possible to apply the style to just this button ? Instead of applying to all button class?
One way to do this is to set type="primary"
and to only change the “primary” buttons
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?
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,
)