State components

[v479038280]

Is there a components which can change its contents or corlors dynamically .like the traffic lights ,we can change its background .further more we can add some text to it

[Charly_Wargnier]

Hey @v479038280, welcome to our forums!

If you’re looking for a simple color system like green, amber, red, you can achieve that with CSS alone. No need for a component.

But if you want something more fancy, check out this cool Gauge chart from echarts:

Examples - Apache ECharts

You can easily implement it using the streamlit-echarts library. Just convert the JavaScript code in the example to Python syntax and replace the dummy data with your data.

Note that I had to do these conversion manually back in the days (painful!), but now, with LLMs like ChatGPT, it’s usually a breeze!

Give it a try and let me know how it goes. I’m here to help!

Best,
Charly

[v479038280]

Thanks for your answer,actually I just want a widget like a button which can change its content or background color with the value it binds to. I can try changing its style with CSS ,but I don’t know how to monitor the value "that button " bind to,and change its color when the value change.

I just use streamlit for several days,and just go throuth the basic tutorials.Streamlit is more convinient than the pyqt.

[edsaac]

If i understood correctly, you’d like to modify the CSS that changes the button color based on some variable value. Here is an idea combining the st.color_picker and a custom CSS for primary buttons:

import streamlit as st

color = st.color_picker("Pick a color for the button:")

st.markdown(f"""
<style>
    .stButton button[kind="primary"] {{
        background-color: {color};
    }}
</style>
""", unsafe_allow_html=True)

"# Colorful buttons"

st.button(f"A primary button", use_container_width=True, type="primary")
st.button(f"A secondary button", use_container_width=True, type="secondary")

[Charly_Wargnier]

Seems like I got a bit off track there!

Just give us a heads up if @edsaac’s solution is the right fit for you.

Best,
Charly

[v479038280]

background_color = st.color_picker("choose color")
text = "press me "
st.markdown(f"""
<style>
.button-text {{
    display: inline-block;
    border: 1px solid #ccc;
    padding: 10px 20px;
    border-radius: 5px;
    background-color: {background_color};
    cursor: pointer;
            }}</style>""", unsafe_allow_html=True)
st.markdown(f'<p class="button-text">{text}</p>', unsafe_allow_html=True)

this works .Thanks