Changing text of button

Using Streamlit
1

I’m just wondering if there is a way to programmatically set the label of a streamlit button e.g.

import streamlit as st
btn = st.button("Click Me!")
if btn:
    btn.text = "Clicked"
2

I am doing it this way.

        if (btn):
              st.markdown(
                    '<style> .streamlit-button.primary-button{visibility: hidden;} .streamlit-button.primary-button:after{content: "Clicked"; visibility: visible; position:relative;-webkit-tap-highlight-color: rgba(38,39,48,0);box-sizing: border-box;font-family: inherit;font-size: inherit;overflow: visible;text-transform: none;display: inline-flex;align-items: center;justify-content: center;font-weight: 400;border-radius: .25rem;margin: 0;line-height: 1.6;color: #262730;cursor: pointer;padding: .25rem .75rem;background-color: #fff;border: 1px solid #e6eaf1; left: 0;}</style>', unsafe_allow_html=True)

I know it is not how it should be done, but it’s just my small personal project and I didn’t find a quick solution so I’m doing it this hacky way. I’m sure the quality can be improved with some more CSS fiddling.

3

I used session_state to replace the whole button. Here is how I switch between 2 buttons:

    myKey = 'my_key'
    if myKey not in st.session_state:
        st.session_state[myKey] = False

    if st.session_state[myKey]:
        myBtn = st.sidebar.button('Button 1')
        st.session_state[myKey] = False
    else:
        myBtn = st.sidebar.button('Button 2')
        st.session_state[myKey] = True

You can use integer instead of boolean to have more cases.

1 Like
4

[minhanh29] inspired me:

      container_2 = st.empty()
      button_A = container_2.button('Btn A')
      if button_A:
          container_2.empty()
          button_B = container_2.button('Btn B')

In this way, if you click other buttons, it will not change.

1 Like
5

Here’s another hacky way it can be done:

tmp2

Cheers