Skip to content

Button Elements

Button elements provide interactive controls for user actions in your Streamlit application. st_yled enhances these components with comprehensive styling options while maintaining full functionality and event handling.

Available Elements

  • button - Interactive buttons with extensive styling and state management
  • download_button - Download buttons with custom styling for file downloads
  • link_button - External link buttons with custom appearance
  • form_submit_button - Form submission buttons with styling options

button

Streamlit equivalent: st.button()

Interactive buttons with extensive styling and state management.

clicked = st_yled.button("Click Me", background_color="#007bff", color="white")

Supported Styling Properties:

  • background_color - Button background color (hex, rgb, named colors)
  • color - Text color (hex, rgb, named colors)
  • font_size - Font size (px, rem, em, %, or integer as px)
  • font_weight - Font weight (100-900, thin, extra-light, light, normal, medium, semi-bold, bold, extra-bold, black)
  • border_style - Border style (solid, dashed, dotted, none)
  • border_color - Border color (hex, rgb, named colors)
  • border_width - Border width (px, rem, em, or integer as px)

Button Types:

st_yled supports independent styling for different button types by using the type parameter:

  • Primary buttons (type="primary") - Main action buttons
  • Secondary buttons (type="secondary") - Default button style
  • Tertiary buttons (type="tertiary") - Subtle action buttons
# Primary button
primary = st_yled.button(
    "Primary Action",
    type="primary",
    background_color="#007bff",
    color="white"
)

# Secondary button
secondary = st_yled.button(
    "Secondary Action",
    type="secondary",
    background_color="#6c757d",
    color="white"
)

# Tertiary button
tertiary = st_yled.button(
    "Tertiary Action",
    type="tertiary",
    background_color="transparent",
    color="#007bff"
)

For global styling of individual button types use the following accessors

st_yled.set("button_primary", "background_color", "lightblue")
st_yled.set("button_secondary", "background_color", "lightblue")
st_yled.set("button_tertiary", "background_color", "lightblue")

download_button

Streamlit equivalent: st.download_button()

Download buttons with custom styling for file downloads.

st_yled.download_button(
    "📄 Download Report",
    data=file_data,
    file_name="report.pdf",
    background_color="#17a2b8",
    color="white"
)

Supported Styling Properties:

  • background_color - Button background color (hex, rgb, named colors)
  • color - Text color (hex, rgb, named colors)
  • font_size - Font size (px, rem, em, %, or integer as px)
  • font_weight - Font weight (100-900, thin, extra-light, light, normal, medium, semi-bold, bold, extra-bold, black)
  • border_style - Border style (solid, dashed, dotted, none)
  • border_color - Border color (hex, rgb, named colors)
  • border_width - Border width (px, rem, em, or integer as px)

Button Types:

Download buttons support the same type variations as regular buttons:

  • Primary (type="primary")
  • Secondary (type="secondary") - Default
  • Tertiary (type="tertiary")

For global styling of individual button types use the following accessors

st_yled.set("download_button_primary", "background_color", "lightblue")
st_yled.set("download_button_secondary", "background_color", "lightblue")
st_yled.set("download_button_tertiary", "background_color", "lightblue")

Streamlit equivalent: st.link_button()

External link buttons with custom appearance.

st_yled.link_button(
    "🔗 Visit Website",
    url="https://example.com",
    background_color="#6f42c1",
    color="white"
)

Supported Styling Properties:

  • background_color - Button background color (hex, rgb, named colors)
  • color - Text color (hex, rgb, named colors)
  • font_size - Font size (px, rem, em, %, or integer as px)
  • font_weight - Font weight (100-900, thin, extra-light, light, normal, medium, semi-bold, bold, extra-bold, black)
  • border_style - Border style (solid, dashed, dotted, none)
  • border_color - Border color (hex, rgb, named colors)
  • border_width - Border width (px, rem, em, or integer as px)

Button Types:

Link buttons support the same type variations as regular buttons:

  • Primary (type="primary")
  • Secondary (type="secondary") - Default
  • Tertiary (type="tertiary")

For global styling of individual button types use the following accessors

st_yled.set("link_button_primary", "background_color", "lightblue")
st_yled.set("link_button_secondary", "background_color", "lightblue")
st_yled.set("link_button_tertiary", "background_color", "lightblue")

form_submit_button

Streamlit equivalent: st.form_submit_button()

Form submission buttons with styling options. Must be used within a st.form() or st_yled.form() context.

with st_yled.form("my_form"):
    st_yled.text_input("Name")
    st_yled.form_submit_button("Submit", background_color="#007bff", color="white")

Supported Styling Properties:

  • background_color - Button background color (hex, rgb, named colors)
  • color - Text color (hex, rgb, named colors)
  • font_size - Font size (px, rem, em, %, or integer as px)
  • font_weight - Font weight (100-900, thin, extra-light, light, normal, medium, semi-bold, bold, extra-bold, black)
  • border_style - Border style (solid, dashed, dotted, none)
  • border_color - Border color (hex, rgb, named colors)
  • border_width - Border width (px, rem, em, or integer as px)

Next Steps

Explore more component categories:

Or dive deeper into styling:

st_yled with ❤️ from EVOBYTE