Snackbar

Represents a Material UI styled snackbar for displaying brief messages or notifications.

Overview

Snackbars provide quick, unobtrusive messages that can include an action button. Useful for showing brief messages at the bottom of the screen.

The snackbar modifier allows you to present a Material Design styled snackbar with a message, optional duration, and action button. You can configure the snackbar to fit your needs by specifying its duration and providing an action for the user.

To use the snackbar modifier, apply it to any View with the required parameters.

Modifers

Presents a snackbar with a message and a default display duration of 5 seconds.

snackbar(isPresented: Binding<Bool>, message: String)

Presents a snackbar with a message, a custom duration, and an optional action button.

snackbar(
    isPresented: Binding<Bool>,
    message: String,
    duration: Double,
    actionButtonKey: String,
    action: (() -> Void)?
)

Parameters

Parameter	Description
isPresented	A Binding to control the visibility of the snackbar.
message	The message displayed in the snackbar.
duration	The duration (in seconds) for which the snackbar is visible. Defaults to 5s.
actionButtonKey	The title of the action button. If nil, no button is displayed.
action	The closure to execute when the action button is tapped. Defaults to nil.

Example

Displays snackbar with a simple message and a default duration of 5 seconds.

@State private var showSnackbar = false

var body: some View {
    Container {
        Switch("Show Default Snackbar", isOn: $showSnackbar)
    }
    .snackbar(isPresented: $showSnackbar, message: "This is a snackbar message.")
}

Displays a snackbar with a custom message, a custom duration, and an optional action button.

@State private var showSnackbarWithButton = false

var body: some View {
    Container {
        Switch("Show Snackbar with Button", isOn: $showSnackbarWithButton)
    }
    .snackbar(
        isPresented: $showSnackbarWithButton,
        message: "Action needed!",
        duration: 10,
        actionButtonKey: "Retry"
    ) {
        Void()
    }
}