Snackbar

The Snackbar component displays brief messages at the bottom of the screen, often with an optional action. It's typically used for notifications, confirmations, or error messages.

Usage

Basic Snackbar Setup

val snackbarHostState = rememberSnackbarHostState()
val scope = rememberCoroutineScope()

Scaffold(
    snackbarHost = {
        Snackbar(hostState = snackbarHostState)
    }
) { paddingValues ->
    Button(
        onClick = {
            scope.launch {
                snackbarHostState.showSnackbar("Hello World!")
            }
        }
    ) {
        Text("Show Snackbar")
    }
}

Snackbar with Action

Button(
    onClick = {
        scope.launch {
            val result = snackbarHostState.showSnackbar(
                message = "Message sent",
                actionLabel = "Undo"
            )
            when (result) {
                SnackbarResult.ActionPerformed -> {
                    // Handle undo action
                }
                SnackbarResult.Dismissed -> {
                    // Handle dismissal
                }
            }
        }
    }
) {
    Text("Send Message")
}

Error Snackbar

Button(
    onClick = {
        scope.launch {
            snackbarHostState.showSnackbar(
                message = "Error: Failed to save changes",
                actionLabel = "Retry"
            )
        }
    }
) {
    Text("Show Error")
}

Success Snackbar

Button(
    onClick = {
        scope.launch {
            snackbarHostState.showSnackbar(
                message = "✓ Changes saved successfully",
                actionLabel = "View"
            )
        }
    }
) {
    Text("Save Changes")
}

Custom Snackbar Colors

Snackbar(
    hostState = snackbarHostState,
    colors = SnackbarDefaults.snackbarColors(
        containerColor = MaterialTheme.colorScheme.error,
        contentColor = MaterialTheme.colorScheme.onError,
        actionColor = MaterialTheme.colorScheme.errorContainer
    )
)

Long Message Snackbar

Button(
    onClick = {
        scope.launch {
            snackbarHostState.showSnackbar(
                message = "This is a much longer snackbar message that demonstrates how text wraps in the snackbar component",
                actionLabel = "Dismiss"
            )
        }
    }
) {
    Text("Long Message")
}

Multiple Snackbars (Queued)

Column {
    Button(
        onClick = {
            scope.launch {
                snackbarHostState.showSnackbar("First message")
            }
        }
    ) {
        Text("Show First")
    }

    Button(
        onClick = {
            scope.launch {
                snackbarHostState.showSnackbar("Second message")
            }
        }
    ) {
        Text("Show Second")
    }
}