Snackbar

The Snackbar component is used to display brief notifications or messages at the bottom of the screen. Below are examples of how to use it in Python Dash.

---

import dash
from dash import html, Input, Output, State, callback
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
  children=[
    # Example 1: Basic success snackbar
    html.Div([
      dmc.Button("Show Success Snackbar", id="success-btn", variant="contained"),
      dmc.Snackbar(
        id="success-snackbar",
        message="Operation completed successfully!",
        severity="success",
        showCloseButton=True,
        open=False,
        autoHideDuration=6000
      )
    ], style={"marginBottom": "16px"}),

    # Example 2: Error snackbar with action
    html.Div([
      dmc.Button("Show Error Snackbar", id="error-btn", variant="contained", color="error"),
      dmc.Snackbar(
        id="error-snackbar",
        message="An error occurred while processing your request",
        severity="error",
        showCloseButton=True,
        open=False,
        autoHideDuration=6000,
        action=dmc.Button("RETRY", color="inherit", size="small")
      )
    ], style={"marginBottom": "16px"}),

    # Example 3: Info snackbar with custom icon
    html.Div([
      dmc.Button("Show Info Snackbar", id="info-btn", variant="contained", color="info"),
      dmc.Snackbar(
        id="info-snackbar",
        message="New features are available!",
        severity="info",
        showCloseButton=True,
        open=False,
        autoHideDuration=6000,
        icon=html.Span("info", style={"fontFamily": "Material Icons"})
      )
    ], style={"marginBottom": "16px"}),

    # Example 4: Warning snackbar
    html.Div([
      dmc.Button("Show Warning Snackbar", id="warning-btn", variant="contained", color="warning"),
      dmc.Snackbar(
        id="warning-snackbar",
        message="Your subscription is about to expire",
        severity="warning",
        showCloseButton=True,
        open=False,
        autoHideDuration=6000
      )
    ])
  ]
)

# Callbacks to show snackbars
@callback(
    Output("success-snackbar", "open"),
    Input("success-btn", "n_clicks"),
    prevent_initial_call=True
)
def show_success_snackbar(n_clicks):
    if n_clicks:
        return True
    return False

@callback(
    Output("error-snackbar", "open"),
    Input("error-btn", "n_clicks"),
    prevent_initial_call=True
)
def show_error_snackbar(n_clicks):
    if n_clicks:
        return True
    return False

@callback(
    Output("info-snackbar", "open"),
    Input("info-btn", "n_clicks"),
    prevent_initial_call=True
)
def show_info_snackbar(n_clicks):
    if n_clicks:
        return True
    return False

@callback(
    Output("warning-snackbar", "open"),
    Input("warning-btn", "n_clicks"),
    prevent_initial_call=True
)
def show_warning_snackbar(n_clicks):
    if n_clicks:
        return True
    return False

if __name__ == "__main__":
    app.run_server(debug=True)

---

Props Table

Below are the main props available for the Snackbar component.

Prop	Type	Default	Description
id	string	-	The ID of the component, used for identifying dash components in callbacks
message	string	-	The message to display in the snackbar
severity	"success" | "info" | "warning" | "error"	-	The severity level of the alert
icon	React.ReactNode	-	Custom icon to display in the snackbar
action	React.ReactNode	-	Action component to display (like a button)
showCloseButton	boolean	false	If true, shows a close button in the snackbar
open	boolean	false	If true, the snackbar is shown
autoHideDuration	number	6000	The number of milliseconds to wait before automatically closing
anchorOrigin	object	{ vertical: 'bottom', horizontal: 'left' }	Position where the snackbar should appear
sx	object	-	The system prop that allows defining custom styles
TransitionComponent	React.ComponentType	-	The component used for the transition
TransitionProps	object	-	Props applied to the Transition element

---

For the full list of props, refer to the official MUI documentation, as this component is based on MUI:

MUI Snackbar Documentation