How to use markdown text streamlit button?

[thisisbhupendrasingh]

Hi community,
I am trying to create streamlit buttons with customized label having different font size and colors. It will act as a KPI in my work:
Example:
Leads
12
Here I want “Leads” to be of smaller size and “12” to be of bigger size and it should sit below the label “Leads”

I tried some options by going through the documentation but did not get the desired result. Please help me to solve this.

            with stylable_container(key="lightblue_button",
                                css_styles="""
                                     button {
                                        display: inline-block;
                                        height: 100px;
                                        background :#c40e23;
                                        color : white;
                                        border-radius: 20px;
                                        white-space: pre-wrap;
                                        padding: 5px;
                                        margin-top:auto;
                                        text-align:center;
                                        overflow-wrap:break-word;
                                        border:1px solid #D3D3D3;
                                        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
                                        transition: background 0.5s ease-in;
                                    }""",):
                # button_label = st.markdown(f"""
                #                     <p style="font-size:24px;">{kpi_values[count][0]}</p>
                #                     <p style="font-size:50px;">{kpi_values[count][1]}</p>
                #                     """, unsafe_allow_html=True)
                st.button(label = f"""
                                    <p style="font-size:24px;">{kpi_values[count][0]}</p>
                                    <p style="font-size:50px;">{kpi_values[count][1]}</p>
                                    """,use_container_width=True)

button streamlit-elements Custom Components Random css

[Goyo]

HTML in labels is not parsed. You can use LaTex instead.

st.button(r"$\footnotesize\text{Leads}\\\Large12$")

[Charly_Wargnier]

Great suggestion @Goyo!