How to Use Snackbar Components in Jetpack Compose (With Usage Examples)

Overview

The Snackbar component in Jetpack Compose provides brief notifications at the bottom of the screen, offering feedback about actions without disrupting the user experience. Snackbars auto-dismiss after a few seconds or can be dismissed via user interaction, such as tapping an action button.

This guide demonstrates how to implement various Snackbars with customization options and best practices for 2025.

When to Use Snackbars

Snackbar Type	When to Use
Basic Snackbar	Simple feedback for non-critical actions, like confirming data saved or settings updated.
Snackbar with Action	Reversible actions, such as confirming deletion with an "Undo" option.
Dismissable Snackbar	Temporary status updates, like notifying offline mode or app state changes.
Custom Styled Snackbar	Branded feedback or success messages, like form submission confirmation.

Creating Snackbar Components in Jetpack Compose

Basic Snackbar Example

Creates a simple Snackbar for non-critical feedback, such as confirming a settings update.


import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Image
import kotlinx.coroutines.launch

@Composable
fun BasicSnackbarExample() {
    val scope = rememberCoroutineScope()
    val snackbarHostState = remember { SnackbarHostState() }
    Scaffold(
        snackbarHost = {
            SnackbarHost(hostState = snackbarHostState)
        },
        floatingActionButton = {
            ExtendedFloatingActionButton(
                text = { Text("Show snackbar") },
                icon = { Icon(Icons.Filled.Image, contentDescription = "Show snackbar") },
                onClick = {
                    scope.launch {
                        snackbarHostState.showSnackbar("Settings saved")
                    }
                }
            )
        }
    ) { contentPadding ->
        // Screen content
    }
}

Result: A basic Snackbar appears at the bottom of the screen when the FAB is clicked, displaying a message like "Settings saved".

Scenario: Use for simple confirmations, such as notifying the user that a form or setting has been saved successfully.

Figure 1. A basic implementation of a Snackbar.

Basic Snackbar Properties

Property	Description
hostState	Links `SnackbarHost` to `SnackbarHostState` to manage Snackbar display.
message	Text displayed in the Snackbar (e.g., "Settings saved").

Snackbar with Action Example

Creates a Snackbar with an action button for reversible actions, such as undoing a deletion.


import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.SnackbarResult
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Image
import kotlinx.coroutines.launch

@Composable
fun SnackbarWithActionExample() {
    val scope = rememberCoroutineScope()
    val snackbarHostState = remember { SnackbarHostState() }
    Scaffold(
        snackbarHost = {
            SnackbarHost(hostState = snackbarHostState)
        },
        floatingActionButton = {
            ExtendedFloatingActionButton(
                text = { Text("Delete item") },
                icon = { Icon(Icons.Filled.Image, contentDescription = "Delete item") },
                onClick = {
                    scope.launch {
                        val result = snackbarHostState.showSnackbar(
                            message = "Item deleted",
                            actionLabel = "Undo",
                            duration = SnackbarDuration.Indefinite
                        )
                        when (result) {
                            SnackbarResult.ActionPerformed -> {
                                // Handle undo action
                            }
                            SnackbarResult.Dismissed -> {
                                // Handle snackbar dismissed
                            }
                        }
                    }
                }
            )
        }
    ) { contentPadding ->
        // Screen content
    }
}

Result: A Snackbar with an "Undo" button that stays on screen until dismissed or acted upon.

Scenario: Use for actions that can be reversed, such as confirming an item deletion with an option to undo.

Figure 2. A Snackbar with an action button.

Snackbar with Action Properties

Property	Description
hostState	Links `SnackbarHost` to `SnackbarHostState` to manage Snackbar display.
message	Text displayed in the Snackbar (e.g., "Item deleted").
actionLabel	Text for the action button (e.g., "Undo").
duration	Controls display time (e.g., `SnackbarDuration.Indefinite`).
result	Returns `SnackbarResult.ActionPerformed` or `SnackbarResult.Dismissed`.

Dismissable Snackbar Example

Creates a Snackbar with a dismiss action for temporary status updates, like notifying offline mode.


import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Image
import kotlinx.coroutines.launch

@Composable
fun DismissableSnackbarExample() {
    val scope = rememberCoroutineScope()
    val snackbarHostState = remember { SnackbarHostState() }
    Scaffold(
        snackbarHost = {
            SnackbarHost(hostState = snackbarHostState)
        },
        floatingActionButton = {
            ExtendedFloatingActionButton(
                text = { Text("Show offline status") },
                icon = { Icon(Icons.Filled.Image, contentDescription = "Show offline status") },
                onClick = {
                    scope.launch {
                        snackbarHostState.showSnackbar(
                            message = "You are offline",
                            withDismissAction = true,
                            duration = SnackbarDuration.Long
                        )
                    }
                }
            )
        }
    ) { contentPadding ->
        // Screen content
    }
}

Result: A Snackbar with a dismiss button (cross) that appears for a longer duration, showing a message like "You are offline".

Scenario: Use for temporary status updates, such as notifying the user of a network disconnection or app state change, where quick dismissal is needed.

Dismissable Snackbar Properties

Property	Description
hostState	Links `SnackbarHost` to `SnackbarHostState` to manage Snackbar display.
message	Text displayed in the Snackbar (e.g., "You are offline").
withDismissAction	Adds a dismiss button (cross) when set to `true`.
duration	Controls display time (e.g., `SnackbarDuration.Long`).

Custom Styled Snackbar Example

Creates a Snackbar with custom colors for branded feedback, like form submission success.


import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.Snackbar
import androidx.compose.material3.SnackbarData
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.graphics.Color
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Image
import kotlinx.coroutines.launch

@Composable
fun CustomStyledSnackbarExample() {
    val scope = rememberCoroutineScope()
    val snackbarHostState = remember { SnackbarHostState() }
    Scaffold(
        snackbarHost = {
            SnackbarHost(hostState = snackbarHostState) { data: SnackbarData ->
                Snackbar(
                    snackbarData = data,
                    containerColor = Color(0xFF1767d0),
                    contentColor = Color.White,
                    actionColor = Color(0xFF4A90E2)
                )
            }
        },
        floatingActionButton = {
            ExtendedFloatingActionButton(
                text = { Text("Submit form") },
                icon = { Icon(Icons.Filled.Image, contentDescription = "Submit form") },
                onClick = {
                    scope.launch {
                        snackbarHostState.showSnackbar(
                            message = "Form submitted successfully",
                            actionLabel = "View",
                            duration = SnackbarDuration.Short
                        )
                    }
                }
            )
        }
    ) { contentPadding ->
        // Screen content
    }
}

Result: A Snackbar with custom blue styling, displaying a success message like "Form submitted successfully" with a "View" action.

Scenario: Use for branded feedback, such as confirming successful form submissions or other positive outcomes, with a consistent app theme.

Custom Styled Snackbar Properties

Property	Description
hostState	Links `SnackbarHost` to `SnackbarHostState` to manage Snackbar display.
message	Text displayed in the Snackbar (e.g., "Form submitted successfully").
actionLabel	Text for the action button (e.g., "View").
duration	Controls display time (e.g., `SnackbarDuration.Short`).
containerColor	Sets the Snackbar background color (e.g., `Color(0xFF1767d0)`).
contentColor	Sets the text color (e.g., `Color.White`).
actionColor	Sets the action button color (e.g., `Color(0xFF4A90E2)`).

Key Points for Implementation

SnackbarHostState: Manages the state of the Snackbar and provides showSnackbar() to display it.
actionLabel: Sets the text for the action button (e.g., "Action").
withDismissAction: Adds a dismiss button (cross) when set to true.
duration: Controls how long the Snackbar is displayed (e.g., SnackbarDuration.Indefinite).
SnackbarResult: Returns ActionPerformed or Dismissed based on user interaction.
Accessibility: Ensure a 48dp touch target for action buttons and use contentDescription for screen readers.

Theming Snackbars

Customize Snackbar appearance using MaterialTheme in Compose to define a custom color scheme or apply specific styles via SnackbarHost customization.


import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.graphics.Color
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Image
import kotlinx.coroutines.launch

@Composable
fun ThemedSnackbarExample() {
    val scope = rememberCoroutineScope()
    val snackbarHostState = remember { SnackbarHostState() }
    MaterialTheme(
        colorScheme = MaterialTheme.colorScheme.copy(
            primary = Color(0xFF1767d0)
        )
    ) {
        Scaffold(
            snackbarHost = {
                SnackbarHost(hostState = snackbarHostState)
            },
            floatingActionButton = {
                ExtendedFloatingActionButton(
                    text = { Text("Show snackbar") },
                    icon = { Icon(Icons.Filled.Image, contentDescription = "Show snackbar") },
                    onClick = {
                        scope.launch {
                            snackbarHostState.showSnackbar(
                                message = "Themed Snackbar",
                                actionLabel = "Action"
                            )
                        }
                    }
                )
            }
        ) { contentPadding ->
            // Screen content
        }
    }
}

FAQ

What is a Snackbar component?

A brief notification at the bottom of the screen for action feedback, auto-dismissing or user-dismissible.

Which composable is used for a Snackbar?

Use SnackbarHost with SnackbarHostState within a Scaffold.

How to make Snackbars accessible?

Ensure a 48dp touch target for action buttons and use contentDescription for screen readers.

Can I customize Snackbar appearance?

Yes, via MaterialTheme.colorScheme or custom SnackbarHost composables.

Welcome to the Jetpack Compose Dev community - your space to learn, share, and master modern Android UI with Jetpack Compose and Kotlin. Ask questions, showcase your UI, explore tutorials, share tips, get feedback, and connect with developers building the future of Android. Whether you're a beginner or experienced, join us in advancing Compose together.

https://www.reddit.com/r/JetpackComposeDev/

How to Use Snackbar Components in Jetpack Compose