Markdown preventing button from working, when combined with keys/tabs/st.session

[ghostmize]

Summary

1- Markdown disabling button from working
2- Adding a graphic element+text on top of a tab name

Steps to reproduce

Code snippet:
…
with col2:
# Send button with styling and unique session state key for each category
if st.session_state.get(f"send_clicked_{category}“):
send_button = True
st.session_state[f"send_clicked_{category}”] = False # Reset the state
else:
send_button = False

    # CSS-styled markdown button with a JavaScript click handler referencing the unique session state variable for the current category
    st.markdown(
        f'<a href="#" class="btn-custom" onclick="window.streamlitSetComponentValue(`send_clicked_{category}`, true)">Send Email</a>',
        unsafe_allow_html=True
    )

with col3:
    delete_button = st.button("Delete Email", key=f"delete_button_{category}")

…

I am using the tabs system with columns and st.session.state,
giving each button a unique key depending on the tab name (each tab has the same setup with different data input)

**Expected behavior: The markdown button (col2) doesn’t work, in comparison to regular buttons which work in the same tab (col3)

Debug info

• Streamlit version: (Streamlit v1.26.0)
• Python version: (Python 3.11.4)
• Using Conda? yes
• OS version: Windows 11

2-
Not an existing issue but looking for a tip about how to add a round square/circle with a variable inside of it, directly on top of the tab names, similar to how facebook show new notifications.

Thanks a lot in advace

Elad

[blackary]

Can you explain why you are trying to use a markdown button and js click handlers, rather than just using normal streamlit buttons? In this case window.streamlitSetComponentValue isn’t defined, as this isn’t inside of a custom component where that has been imported or defined, and if is generating a javascript error on click.

I would recommend trying to accomplish the same thing with st.button, or, if really necessary create an entire component to accomplish whatever you are trying to accomplish. If you are just trying to get back which button has been clicked, then you can do this:

import streamlit as st

tab1, tab2 = st.tabs(["Tab 1", "Tab 2"])

with tab1:
    tab1_button1_clicked = st.button("Tab 1 Button 1")
    tab1_button2_clicked = st.button("Tab 1 Button 2")

with tab2:
    tab2_button1_clicked = st.button("Tab 2 Button 1")
    tab2_button2_clicked = st.button("Tab 2 Button 2")

if tab1_button1_clicked:
    st.write("Tab 1 Button 1 clicked!")
...

[blackary]

For the second question, you can do something like this

import streamlit as st

if "new_emails" not in st.session_state:
    st.session_state["new_emails"] = 0

if "new_messages" not in st.session_state:
    st.session_state["new_messages"] = 0

if st.button("New email"):
    st.session_state["new_emails"] += 1

if st.button("New message"):
    st.session_state["new_messages"] += 1

tab1_name = (
    "Emails"
    if st.session_state["new_emails"] == 0
    else f"Emails ({st.session_state['new_emails']})"
)

tab2_name = (
    "Messages"
    if st.session_state["new_messages"] == 0
    else f"Messages ({st.session_state['new_messages']})"
)

tab1, tab2 = st.tabs([tab1_name, tab2_name])

with tab1:
    st.write("Tab 1")
    st.write(f"You have {st.session_state['new_emails']} new emails.")

with tab2:
    st.write("Tab 2")
    st.write(f"You have {st.session_state['new_messages']} new messages.")

[ghostmize]

Hello

Thank you so much for the mega quick response.
My reasoning for markdown is mainly the design, which is an issue I assume will repeat a lot, as I focus a lot on UI design too.
I need some buttons to look differently.

The buttons work with st.button perfectly, just adding the CSS via markdown breaks it somehow.

[ghostmize]

For the notification idea you mentioned, I made already something similar, but I want the specific idea of how I imagined it, is it possible?

Current:

Wished for:

Maybe I’m over reaching but worth asking
Thanks a lot again