Skip to content

Mehr als nur Basics: Umfassender Leitfaden für Streamlit-Schaltflächen

Olaf Källström
Name
Olaf Källström

Updated on

Streamlit macht es einfach, Python-Skripte in interaktive Apps zu verwandeln, und Buttons sind meist die erste Interaktion, die Nutzer*innen erwarten. Das Widget st.button wirkt minimalistisch, schaltet aber Workflows frei, die von schnellen Toggles bis hin zu komplexen Mehrschritt-Abläufen reichen. Dieser überarbeitete Leitfaden fasst die moderne API zusammen, räumt mit häufigen Missverständnissen auf und liefert erprobte Muster für zuverlässige, button-gesteuerte Erlebnisse.

Du suchst nach einer sofort einsetzbaren Komponente für visuelle Analysen in deinen Streamlit-Projekten?

PyGWalker (opens in a new tab) bindet eine Tableau-ähnliche Explorationsoberfläche direkt in Streamlit-Apps ein. Sieh dir an, wie du Daten mit PyGWalker erkundest (opens in a new tab), oder lies die Integrationsanleitung.

st.button verstehen

Schnellstart

Im Kern rendert st.button ein klickbares Element und gibt während des Skriptlaufs, der unmittelbar auf einen Klick folgt, True zurück. Der zurückgegebene boolesche Wert reicht für einfache Abläufe meist aus:

import streamlit as st
 
if st.button("Sag hallo"):
    st.write("Hallo, Streamlit!")

Streamlit führt das gesamte Skript bei jeder Widget-Änderung erneut aus. Achte wegen dieses Rerun-Modells darauf, dass die Arbeit im if-Block idempotent ist oder durch zusätzlichen Zustand abgesichert wird.

Wichtige Argumente

st.button akzeptiert mehrere optionale Argumente, die die meisten Anpassungen abdecken:

  • key: Eindeutiger Bezeichner, wenn mehrere Buttons denselben Text haben.
  • help: Tooltip-Text, der beim Hover angezeigt wird.
  • on_click: Callback, der ausgeführt wird, sobald der Button gedrückt wurde.
  • args / kwargs: Positions- bzw. Keyword-Argumente, die an den Callback weitergereicht werden.
  • type: Wähle zwischen den Styling-Presets "primary" und "secondary", um das Streamlit-Theme zu treffen.
  • disabled: Verhindert die Interaktion mit dem Button.
  • use_container_width: Dehnt den Button auf die Breite des umgebenden Containers.
def refresh_data(verbose: bool = False, limit: int | None = None) -> None:
    st.session_state["last_result"] = load_data(limit=limit)
    if verbose:
        st.success("Daten aktualisiert")
 
st.button(
    "Daten aktualisieren",
    key="refresh",
    help="Zieht die neuesten Datensätze aus der API",
    type="primary",
    use_container_width=True,
    on_click=refresh_data,
    args=(True,),
    kwargs={"limit": 500},
)

Interaktionen jenseits des Rückgabewerts

Callbacks und Session State nutzen

Callbacks laufen, nachdem Streamlit Widget-Änderungen gesammelt hat, und eignen sich ideal, um Logik zu kapseln und st.session_state zu aktualisieren:

import datetime as dt
import streamlit as st
 
if "last_clicked" not in st.session_state:
    st.session_state.last_clicked = None
 
 
def mark_timestamp() -> None:
    st.session_state.last_clicked = dt.datetime.now(dt.timezone.utc)
 
st.button("Zeitstempel speichern", on_click=mark_timestamp, type="primary")
 
st.write("Letzter Klick:", st.session_state.last_clicked or "Noch keiner")

Callbacks halten dein Skript auf oberster Ebene deklarativ, vermeiden verschachtelte if-Blöcke und bewahren Zustand über Reruns hinweg.

Toggle-Verhalten aufbauen

Buttons bleiben nicht gedrückt, doch in Kombination mit Session State kannst du Toggle-ähnliche Interaktionen erreichen:

import streamlit as st
 
st.session_state.setdefault("show_advanced", False)
 
if st.button("Erweiterte Optionen umschalten"):
    st.session_state.show_advanced = not st.session_state.show_advanced
 
if st.session_state.show_advanced:
    st.info("Erweiterte Konfiguration kommt hier hin.")

Für persistente Schalter (z. B. An/Aus) sind Widgets wie st.checkbox oder st.toggle semantisch klarer.

Layout-Techniken für Buttons

Streamlit ordnet Elemente in der Reihenfolge an, in der sie erscheinen, aber über Container behältst du Kontrolle über das Layout:

col1, col2 = st.columns(2)
with col1:
    st.button("Zurück", key="prev", type="secondary")
with col2:
    st.button("Weiter", key="next", type="primary", use_container_width=True)
 
with st.sidebar:
    st.button("Filter zurücksetzen", key="reset")

Nutze st.container() oder st.expander(), um zusammengehörige Aktionen zu gruppieren, und st.columns(), um Buttons ohne pures HTML in einer Reihe auszurichten.

Styling-Optionen und CSS-Anpassungen

Streamlit begrenzt bewusst direkte Styling-Möglichkeiten, um Konsistenz zu wahren, dennoch hast du Optionen:

  • Nutze das integrierte Preset type="primary" für Betonung und use_container_width=True für responsive Layouts.
  • Passe Standardfarben über globale Theme-Einstellungen (.streamlit/config.toml) an.
  • Injektiere bei Bedarf maßgeschneidertes CSS über st.markdown(..., unsafe_allow_html=True).
import streamlit as st
 
st.markdown(
    """
    <style>
    .custom-button button {
        background: linear-gradient(135deg, #005bbb, #00bcd4);
        color: white;
        border: 0;
        padding: 0.6rem 1.5rem;
        border-radius: 999px;
        transition: transform 0.1s ease-in-out;
    }
    .custom-button button:hover {
        transform: translateY(-1px);
    }
    </style>
    """,
    unsafe_allow_html=True,
)
 
with st.container():
    st.markdown('<div class="custom-button">', unsafe_allow_html=True)
    st.button("Gradient-Button", key="custom")
    st.markdown("</div>", unsafe_allow_html=True)

Halte CSS-Anpassungen fokussiert; große Inline-Blöcke sind schwer zu pflegen und können brechen, wenn Streamlit interne Klassennamen ändert.

Praktische Muster

  • Progressive Offenlegung: Kombiniere einen Button mit st.session_state, um bei Bedarf zusätzliche Eingaben oder Texte einzublenden.
  • Datenverarbeitungsschritte: Deaktiviere Buttons (disabled=True), bis Voraussetzungen wie Datei-Uploads oder Tokens vorhanden sind.
  • Download-Flows: Greife zu st.download_button, wenn du Dateien bereitstellst; nutze st.button für Logik innerhalb der App.

Fazit

Buttons verankern viele Streamlit-User-Journeys. Durch die Kombination aus booleschem Rückgabewert, Callback-API und st.session_state koordinierst du komplexe Abläufe, ohne das reaktive Paradigma zu verlassen. Setze Layout-Primitiven für Ausrichtung ein, greife nur bei Bedarf zu CSS, und erwäge alternative Widgets, wenn ein persistenter Status eindeutiger ist. Sorgfältig gestaltete Buttons halten deine Streamlit-Apps schnell, intuitiv und zuverlässig.

Häufig gestellte Fragen

Wie erstellt man einen Button in Streamlit?

Verwende st.button("Beschriftung"). Die Funktion gibt True in dem Lauf zurück, der durch den Klick ausgelöst wurde, also platziere deine Logik im entsprechenden if-Block oder übergib einen Callback mit on_click.

Wie positioniert man einen Button in Streamlit?

Umwickle Widgets mit Layout-Primitiven wie st.columns, st.container, st.sidebar oder st.expander. Diese Container steuern die Platzierung, ohne dass du für die Ausrichtung auf rohes HTML angewiesen bist.

Wie erstellt man einen Radio-Button in Streamlit?

Nutze st.radio(label, options), um sich gegenseitig ausschließende Optionen anzubieten. Die Auswahl wird sofort zurückgegeben und kann in st.session_state für weitere Logik gespeichert werden.

Was sind Nachteile von Streamlit?

Das Skript-Rerun-Modell von Streamlit vereinfacht die Entwicklung, kann sich aber einschränkend anfühlen, wenn du feingranulare Kontrolle über Layout, lang laufende Hintergrundprozesse oder tiefgreifendes Styling brauchst. Das Ökosystem entwickelt sich jedoch schnell weiter – neue Widgets, Theme-Optionen und Session-State-Helfer verkleinern diese Lücken stetig.