Streamlit Popup
we can write pop ups using st.dialog
The st.dialog feature in Streamlit allows you to create pop-up dialog boxes in your web application. These dialog boxes can be used to display information, gather user input, or confirm actions
A function decorated with @st.dialog becomes a dialog function. When you call a dialog function, Streamlit inserts a modal dialog into your app. Streamlit element commands called within the dialog function render inside the modal dialog.
Collect user inputs in a separate modal.
Display custom messages, alerts, or confirmations.
Implement multi-step forms inside a modal.
Enhance user experience without navigating away from the current page.
Need a Streamlit developer? Click Here
Basic Syntax
import streamlit as st
st.dialog(title, *, width=”small”, dismissible=True, on_dismiss=”ignore”)
| Parameter | Type | Default | Description |
|---|---|---|---|
| title | str | Required | The title displayed at the top of the dialog. Supports limited GitHub-flavored Markdown: Bold, Italics, Inline Code, Links, and Images. Unsupported elements are unwrapped, or escape with \. |
| width | "small", "medium", "large" | "small" | Sets the maximum width of the modal dialog:• “small” → up to 500px (default)• “medium” → up to 750px• “large” → up to 1280px |
| dismissible | bool | True | Whether users can dismiss the dialog:• If True, can close by clicking outside, “X”, or ESC.• If False, the dialog must be closed programmatically using st.rerun(). (Not security-restrictive!) |
| on_dismiss | "ignore", "rerun", or callable | "ignore" | Defines the behavior when the dialog is dismissed:• “ignore” → Do nothing (default).• “rerun” → Reruns the entire app.• callable → Executes the function before rerunning the app. |
Example usage of st.dialog
Here, we demonstrate the basic usage of @st.dialog.
Clicking A or B will open a modal dialog and prompt you to enter a reason for your vote.
In the modal dialog, click “Submit” to record your vote into Session State and rerun the app. This will close the modal dialog since the dialog function is not called during the full-script rerun.
@st.dialog("Vote for your favorite option")
def vote(item):
st.write(f"Why is {item} your favorite?")
reason = st.text_input("Because...")
if st.button("Submit"):
st.session_state.vote = {"item": item, "reason": reason}
st.success("Vote recorded!")
st.rerun()
if "votes" not in st.session_state:
st.write("Vote for your favorite")
if st.button("A"):
vote("A")
if st.button("B"):
vote("B")
else:
f"You voted for {st.session_state.vote['item'] } because {st.session_state.vote['reason']}"
Open on Button
You can also open a dialog when a button is clicked. In this example, clicking the “Open Dialog” button opens a modal dialog.
import streamlit as st
st.write("Basic dialog")
@st.dialog("Enter Your Name")
def open_modal():
st.write("This is a dialog")
st.caption("Click outside or press Esc to close")
if st.button("Open dialog"):
open_modal()
Dialog with a form
import streamlit as st
st.write("Basic Form")
@st.dialog("Registration Form")
def registration_dialog():
name = st.text_input("Name")
email = st.text_input("Email")
submit = st.button("Submit")
if submit:
st.session_state.user = {"name": name, "email": email}
st.success("Saved!")
st.rerun()
st.write(st.session_state.get('user', {}))
if st.button("Register"):
registration_dialog()
Multi-step dialog
import streamlit as st
if "step" not in st.session_state:
st.session_state.step = 1
if "form_data" not in st.session_state:
st.session_state.form_data = {}
@st.dialog("Multi-step form")
def multistep():
step = st.session_state.step
if step == 1:
st.write("Step 1 - Personal")
st.session_state.form_data["name"] = st.text_input("Name")
if st.button("Next"):
st.session_state.step = 2
# st.rerun()
elif step == 2:
st.write("Step 2 - Contact")
st.session_state.form_data["email"] = st.text_input("Email")
cols = st.columns(2)
if cols[0].button("Back"):
st.session_state.step = 1
# st.rerun()
submit = st.button("Submit")
if submit:
st.success(f"welcome {st.session_state.form_data.get("name", {})}")
if st.button("Open Multi form"):
multistep()
Plotly/Chart inside a dialog
import streamlit as st
import plotly.express as px
import pandas as pd
df = pd.DataFrame({
“Month”: [“Jan”,”Feb”,”Mar”,”Apr”,”May”],
“Sales”: [120, 150, 130, 180, 210]
})
@st.dialog(“Sales trend”)
def sales_dialog():
fig = px.line(df, x=”Month”, y=”Sales”, markers=True, title=”Monthly Sales”)
st.plotly_chart(fig, use_container_width=True)
st.caption(“Interactive chart inside a dialog”)
if st.button(“Show sales chart”):
sales_dialog()
Key takeaways
Correct API:
@st.dialog("Title")above a function; call the function to open the dialog.Use
st.rerun()after actions (submit/confirm) to close the dialog and update state.Use
st.session_stateto pass results back to the main page.Keep dialogs focused (one intent: confirm, form, or preview).
Learn more about Streamlit: Click Here
Watch Streamlit Videos:
