Unsafe_allow_html for all widgets

🎈 Using Streamlit
1

hi,
arg unsafe_allow_html in st.markdown is very useful for customization.
Is it planned to be added to other widgets?
So something like

    st.button("<p style='font-family:Comic Sans MS'>Comic Sans Button</p>",  unsafe_allow_html=True)

could be possible

2

Unfortunately you can’t but you can achieve the desire style with the following code:

image
image1122×605 9.54 KB

import streamlit as st
st.header("My custom Button 💫")
st.button("Comic Sans Button")
st.markdown("""
<style>
.st-emotion-cache-1vbkxwb p{
    font-family: 'Comic Sans MS';
}
</style>
""", unsafe_allow_html=True)
3

thanks for the quick response.
That’s quite nice.
Questions
1)
how do you keep hierarchy?
for example, to achieve

    st.button("regular button 1")

    st.button("Comic Sans Button")
    st.markdown("""
    <style>
    .st-emotion-cache-1vbkxwb p{
        font-family: 'Comic Sans MS';
    }
    </style>
    """, unsafe_allow_html=True)
    st.button("regular button 2")

with only “comic sans button” in comic sans.

  1. what “.st-emotion-cache-1vbkxwb” means? is this naming stable across st releases?
4

Declare the CSS code first and then the buttons you will use.

import streamlit as st
st.header("My custom Button 💫")
st.markdown("""
<style>
.st-emotion-cache-1vbkxwb p{
    font-family: 'Comic Sans MS';
}
</style>
""", unsafe_allow_html=True)

st.button("regular button 1")
st.button("Comic Sans Button")
st.button("regular button 2")
st.button("regular button 3")
st.button("regular button 4")
st.button("regular button 5")

This is the HTML element of the Streamlit button:
<div data-testid="stMarkdownContainer" class="st-emotion-cache-1vbkxwb e1nzilvr5"><p>Comic Sans Button</p></div>

So if we want to modify the font type, we access it through the class name and the paragraph within the div using CSS:

.st-emotion-cache-1vbkxwb p{
    font-family: 'Comic Sans MS';
}

image
image1366×768 103 KB

:point_right: Please mark this post as a solution if it meets your expectations.

5

How stable is this “.st-emotion-cache-1vbkxwb” id?

can change if i move the button around?
can change if i add other widgets?
can change if i upgrade streamlit?

thanks

6

That class is not guaranteed to be stable across streamlit versions – if you’d like, there is a module in streamlit extras that makes it easier to target a specific widget 🎨 Styleable Container - streamlit-extras