Adding Buttons in Streamlit

Adding a Button in Streamlit

Buttons in Streamlit allow users to trigger actions, submit forms, or toggle states within an interactive web app. The st.button() function is used to implement buttons for user interaction.

Basic Example

A simple button that triggers an UI action when clicked.

import streamlit as st

if st.button('Click Me'):
    st.write('Button was clicked!')

Using Buttons to Trigger a Function

A button that triggers a function when clicked.

import streamlit as st

def greet():
    st.write("Hello, Streamlit user!")

if st.button('Say Hello'):
    greet()

Filtering Data with Buttons

A button that filters data based on the selected region.

import streamlit as st
import pandas as pd

# Create sample data
data = pd.DataFrame({
    'region': ['North', 'South', 'North', 'South', 'East', 'West'],
    'sales': [100, 200, 150, 250, 300, 180]
})

# Display filter buttons
col1, col2, col3, col4 = st.columns(4)
with col1:
    if st.button('North'):
        filtered_data = data[data['region'] == 'North']
with col2:
    if st.button('South'):
        filtered_data = data[data['region'] == 'South']
with col3:
    if st.button('East'):
        filtered_data = data[data['region'] == 'East']
with col4:
    if st.button('West'):
        filtered_data = data[data['region'] == 'West']

# Display the filtered data
st.dataframe(filtered_data if 'filtered_data' in locals() else data)

Filtering Data with Button Groups

If you’re building a data-driven application, Evidence provides an alternative to Streamlit’s button component with the ButtonGroup component, which enables interactive filtering directly on dashboards without requiring a separate button click.

Example: Filtering Data with ButtonGroup in Evidence

```sql regions 
select 'North' as region, 100 as sales union all 
select 'South' as region, 200 as sales union all 
select 'East' as region, 150 as sales union all 
select 'West' as region, 250 as sales 
```

<ButtonGroup 
    name=region_picker 
    data={regions} 
    value=region 
/>

```sql filtered_sales 
SELECT * FROM sales_data 
WHERE region = '${inputs.region_picker}' 
```

<DataTable data={filtered_sales} />

This allows users to filter datasets dynamically with just a click, improving the user experience for data exploration. In Evidence, navigation and filtering are built into the UI, making reports more streamlined and intuitive.

Streamlit Buttons vs. Evidence ButtonGroups

For interactive data applications, Evidence’s <ButtonGroup/> component provides a more efficient and user-friendly approach to filtering and navigating reports.

Check out more inputs in the Evidence component library.