Material 3 Snackbars in Jetpack Compose

Get started with Material 3 snackbars in Jetpack Compose to create user-friendly interfaces for brief notifications.

Explore Snackbar Styles

Learn to implement two Material 3 snackbar types for showing brief notifications.

Basic Snackbar

Shows a brief notification.

@Composable
fun BasicSnackbarExample() {
    // Creates a simple snackbar with a message
    val snackbarHostState = remember { SnackbarHostState() }
    SnackbarHost(
        hostState = snackbarHostState // *Required: Manages snackbar state
    )
    LaunchedEffect(Unit) {
        snackbarHostState.showSnackbar(
            message = "Photo archived" // *Required: Sets the notification message
        )
    }
}
  

Use a Basic Snackbar when you want to show a brief notification.

Examples:

• Show a success message after saving settings
• Notify about a network error
• Confirm a form submission

---

Snackbar with Action

Shows a notification with an action button.

@Composable
fun SnackbarWithActionExample() {
    // Creates a snackbar with a message and action button
    val snackbarHostState = remember { SnackbarHostState() }
    SnackbarHost(
        hostState = snackbarHostState // *Required: Manages snackbar state
    )
    LaunchedEffect(Unit) {
        snackbarHostState.showSnackbar(
            message = "Email archived", // *Required: Sets the notification message
            actionLabel = "Undo", // Sets the action button text
            duration = SnackbarDuration.Indefinite // Keeps snackbar until dismissed
        )
    }
}
  

Use a Snackbar with Action when you want to offer an action with a notification.

Examples:

• Offer an undo option after deleting an email
• Show a retry action for a failed upload
• Provide a dismiss option for a network status alert

---

Snackbar Properties

Understand the key properties used in the snackbar examples.

Property	Usage
hostState*	Required: Manages the snackbar’s state for displaying notifications
message*	Required: Sets the notification message displayed in the snackbar
actionLabel	Sets the text for the action button (e.g., "Undo")
duration	Sets how long the snackbar is displayed (e.g., Indefinite)