Customize status callout elements (st.error, st.success, etc.) with st-flexible-callout-elements!

Show the Community!
,
1

Hello everybody!

I’m excited to introduce st-flexible-callout-elements, a new library that allows you to create customizable callout messages directly within your Streamlit apps.

While Streamlit’s built-in callout messages (st.error, st.success, st.info, st.warning) are great to see the status of processes, I needed more control over styling to make my apps look just right. Like my previous release, I was working on this for myself and thought I could make it available for others.

example
example1920×869 66.4 KB

Live Demo. Documentation. Pypi.

You can easily install it through pip:

pip install st-flexible-callout-elements

The main function of the library flexible_callout() can handle several arguments for customization.

import streamlit as st
from st_flexible_callout_elements import flexible_callout

flexible_callout(message, container=st, background_color="#D9D9D9", font_color="#000000", font_size=16, alignment="left", line_height=1.5, border_radius=8, padding=15, margin_bottom=20)`

Calling the function with just a message and no other arguments, e.g.:

flexible_callout("This is the standard flexible callout.")

Will result in:

standard
standard704×54 1.52 KB

There are also four companion functions flexible_error(), flexible_success(), flexible_warning(), and flexible_info() that emulate streamlit’s: st.error(), st.success(), st.info(), st.warning(). They have most of the same arguments as flexible_callout() with the exception of background_color and font_color which are fixed to match their counterparts.

import streamlit as st
from st_flexible_callout_elements import flexible_error, flexible_success, flexible_warning, flexible_info

flexible_error("This is a slightly larger error message.", font_size=20)
flexible_success("This is a centered success message", alignment="center")
flexible_warning("This is right aligned a warning message <b><u>with html elements</b></u>", alignment="right")
flexible_info("This is a slightly smaller info message", font_size=10)

emulate
emulate704×273 11.7 KB

As the post is getting long, I’ll leave you a few other images as examples (their code is properly documented on github and Pypi).

custom_colors
custom_colors704×54 1.93 KB

sidebar

rounded

line_height

fun_stuff

I hope you find st_flexible_callout_elements useful for your Streamlit projects. Please let me know if you have any feedback or suggestions!

Cheers!

5 Likes
2

is it possible to use as column in dataframe please.

3

Hi @Sai_SaiGraph,

Unfortunately not, since flexible_callout() is designed to render directly to the Streamlit UI, it cannot be directly embedded into a dataframe.

But there are simpler solutions without using any libraries if you are interested. Something like:

import streamlit as st
import pandas as pd

# Sample DataFrame
df = pd.DataFrame({
    'Name': ['Alice', 'Bob', 'Charlie'],
    'Age': [24, 30, 22],
    'Score': [88, 92, 85]
})

# Function to style DataFrame cells with HTML based on the 'Score' value
def apply_callout_html(val):
    if val > 90:
        return f'<div style="background-color:#e8f9ee;color:#177233;padding:5px;border-radius:5px;">{val}</div>'
    elif val < 85:
        return f'<div style="background-color:#ffecec;color:#7d353b;padding:5px;border-radius:5px;">{val}</div>'
    else:
        return f'<div>{val}</div>'

# Apply callouts to the 'Score' column
df['Score'] = df['Score'].apply(apply_callout_html)

# Convert DataFrame to HTML with escape=False to allow HTML elements
df_html = df.to_html(escape=False)

# Display the styled DataFrame in Streamlit
st.markdown(df_html, unsafe_allow_html=True)

Will yield:

example

Cheers!

2 Likes
4

Wonderful Thank you very much that helps.