Snackbar

Functions summary

`Unit`	`@Composable Snackbar( snackbarData: SnackbarData, modifier: Modifier, actionOnNewLine: Boolean, shape: Shape, containerColor: Color, contentColor: Color, actionColor: Color, actionContentColor: Color, dismissActionContentColor: Color )` Material Design snackbar	Cmn
`Unit`	`@Composable Snackbar( modifier: Modifier, action: (@Composable () -> Unit)?, dismissAction: (@Composable () -> Unit)?, actionOnNewLine: Boolean, shape: Shape, containerColor: Color, contentColor: Color, actionContentColor: Color, dismissActionContentColor: Color, content: @Composable () -> Unit )` Material Design snackbar	Cmn

Functions

Snackbar

Cmn

Artifact: androidx.compose.material3:material3

View Source

Added in 1.5.0-alpha16

@Composable
fun Snackbar(
    snackbarData: SnackbarData,
    modifier: Modifier = Modifier,
    actionOnNewLine: Boolean = false,
    shape: Shape = SnackbarDefaults.shape,
    containerColor: Color = SnackbarDefaults.color,
    contentColor: Color = SnackbarDefaults.contentColor,
    actionColor: Color = SnackbarDefaults.actionColor,
    actionContentColor: Color = SnackbarDefaults.actionContentColor,
    dismissActionContentColor: Color = SnackbarDefaults.dismissActionContentColor
): Unit

Material Design snackbar

Snackbars provide brief messages about app processes at the bottom of the screen.

Snackbar
image

Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.

A Snackbar can contain a single action. "Dismiss" or "cancel" actions are optional.

Snackbars with an action should not timeout or self-dismiss until the user performs another action. Here, moving the keyboard focus indicator to navigate through interactive elements in a page is not considered an action.

This version of snackbar is designed to work with SnackbarData provided by the SnackbarHost, which is usually used inside of the Scaffold.

This components provides only the visuals of the Snackbar. If you need to show a Snackbar with defaults on the screen, use SnackbarHostState.showSnackbar:

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Snackbar
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier

val snackbarHostState = remember { SnackbarHostState() }
val scope = rememberCoroutineScope()
Scaffold(
    snackbarHost = { SnackbarHost(snackbarHostState) },
    floatingActionButton = {
        var clickCount by remember { mutableStateOf(0) }
        ExtendedFloatingActionButton(
            onClick = {
                // show snackbar as a suspend function
                scope.launch { snackbarHostState.showSnackbar("Snackbar # ${++clickCount}") }
            }
        ) {
            Text("Show snackbar")
        }
    },
    content = { innerPadding ->
        Text(
            text = "Body content",
            modifier = Modifier.padding(innerPadding).fillMaxSize().wrapContentSize(),
        )
    },
)

If you want to customize appearance of the Snackbar, you can pass your own version as a child of the SnackbarHost to the Scaffold:

import androidx.compose.foundation.border
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Snackbar
import androidx.compose.material3.SnackbarDuration
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.SnackbarVisuals
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

class SnackbarVisualsWithError(override val message: String, val isError: Boolean) :
    SnackbarVisuals {
    override val actionLabel: String
        get() = if (isError) "Error" else "OK"

    override val withDismissAction: Boolean
        get() = false

    override val duration: SnackbarDuration
        get() = SnackbarDuration.Indefinite
}

val snackbarHostState = remember { SnackbarHostState() }
val scope = rememberCoroutineScope()
Scaffold(
    snackbarHost = {
        // reuse default SnackbarHost to have default animation and timing handling
        SnackbarHost(snackbarHostState) { data ->
            // custom snackbar with the custom action button color and border
            val isError = (data.visuals as? SnackbarVisualsWithError)?.isError ?: false
            val buttonColor =
                if (isError) {
                    ButtonDefaults.textButtonColors(
                        containerColor = MaterialTheme.colorScheme.errorContainer,
                        contentColor = MaterialTheme.colorScheme.error,
                    )
                } else {
                    ButtonDefaults.textButtonColors(
                        contentColor = MaterialTheme.colorScheme.inversePrimary
                    )
                }

            Snackbar(
                modifier =
                    Modifier.border(2.dp, MaterialTheme.colorScheme.secondary).padding(12.dp),
                action = {
                    TextButton(
                        onClick = { if (isError) data.dismiss() else data.performAction() },
                        colors = buttonColor,
                    ) {
                        Text(data.visuals.actionLabel ?: "")
                    }
                },
            ) {
                Text(data.visuals.message)
            }
        }
    },
    floatingActionButton = {
        var clickCount by remember { mutableStateOf(0) }
        ExtendedFloatingActionButton(
            onClick = {
                scope.launch {
                    snackbarHostState.showSnackbar(
                        SnackbarVisualsWithError(
                            "Snackbar # ${++clickCount}",
                            isError = clickCount % 2 != 0,
                        )
                    )
                }
            }
        ) {
            Text("Show snackbar")
        }
    },
    content = { innerPadding ->
        Text(
            text = "Custom Snackbar Demo",
            modifier = Modifier.padding(innerPadding).fillMaxSize().wrapContentSize(),
        )
    },
)

When a SnackbarData.visuals sets the Snackbar's duration as SnackbarDuration.Indefinite, it's recommended to display an additional close affordance action. See SnackbarVisuals.withDismissAction:

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Snackbar
import androidx.compose.material3.SnackbarDuration
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier

val snackbarHostState = remember { SnackbarHostState() }
val scope = rememberCoroutineScope()
Scaffold(
    snackbarHost = { SnackbarHost(snackbarHostState) },
    floatingActionButton = {
        var clickCount by remember { mutableStateOf(0) }
        ExtendedFloatingActionButton(
            onClick = {
                // show snackbar as a suspend function
                scope.launch {
                    snackbarHostState.showSnackbar(
                        message = "Snackbar # ${++clickCount}",
                        actionLabel = "Action",
                        withDismissAction = true,
                        duration = SnackbarDuration.Indefinite,
                    )
                }
            }
        ) {
            Text("Show snackbar")
        }
    },
    content = { innerPadding ->
        Text(
            text = "Body content",
            modifier = Modifier.padding(innerPadding).fillMaxSize().wrapContentSize(),
        )
    },
)

Parameters
`snackbarData: SnackbarData`	data about the current snackbar showing via `SnackbarHostState`
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this snackbar
`actionOnNewLine: Boolean = false`	whether or not action should be put on a separate line. Recommended for action with long action text.
`shape: Shape = SnackbarDefaults.shape`	defines the shape of this snackbar's container
`containerColor: Color = SnackbarDefaults.color`	the color used for the background of this snackbar. Use `Color.Transparent` to have no color.
`contentColor: Color = SnackbarDefaults.contentColor`	the preferred color for content inside this snackbar
`actionColor: Color = SnackbarDefaults.actionColor`	the color of the snackbar's action
`actionContentColor: Color = SnackbarDefaults.actionContentColor`	the preferred content color for the optional action inside this snackbar. See `SnackbarVisuals.actionLabel`.
`dismissActionContentColor: Color = SnackbarDefaults.dismissActionContentColor`	the preferred content color for the optional dismiss action inside this snackbar. See `SnackbarVisuals.withDismissAction`.

Snackbar

Cmn

Artifact: androidx.compose.material3:material3

View Source

Added in 1.5.0-alpha16

@Composable
fun Snackbar(
    modifier: Modifier = Modifier,
    action: (@Composable () -> Unit)? = null,
    dismissAction: (@Composable () -> Unit)? = null,
    actionOnNewLine: Boolean = false,
    shape: Shape = SnackbarDefaults.shape,
    containerColor: Color = SnackbarDefaults.color,
    contentColor: Color = SnackbarDefaults.contentColor,
    actionContentColor: Color = SnackbarDefaults.actionContentColor,
    dismissActionContentColor: Color = SnackbarDefaults.dismissActionContentColor,
    content: @Composable () -> Unit
): Unit

Material Design snackbar

Snackbars provide brief messages about app processes at the bottom of the screen.

Snackbar
image

A Snackbar can contain a single action. "Dismiss" or "cancel" actions are optional.

This component provides only the visuals of the Snackbar. If you need to show a Snackbar with defaults on the screen, use SnackbarHostState.showSnackbar:

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Snackbar
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier

val snackbarHostState = remember { SnackbarHostState() }
val scope = rememberCoroutineScope()
Scaffold(
    snackbarHost = { SnackbarHost(snackbarHostState) },
    floatingActionButton = {
        var clickCount by remember { mutableStateOf(0) }
        ExtendedFloatingActionButton(
            onClick = {
                // show snackbar as a suspend function
                scope.launch { snackbarHostState.showSnackbar("Snackbar # ${++clickCount}") }
            }
        ) {
            Text("Show snackbar")
        }
    },
    content = { innerPadding ->
        Text(
            text = "Body content",
            modifier = Modifier.padding(innerPadding).fillMaxSize().wrapContentSize(),
        )
    },
)

If you want to customize appearance of the Snackbar, you can pass your own version as a child of the SnackbarHost to the Scaffold:

import androidx.compose.foundation.border
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Snackbar
import androidx.compose.material3.SnackbarDuration
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.SnackbarVisuals
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

class SnackbarVisualsWithError(override val message: String, val isError: Boolean) :
    SnackbarVisuals {
    override val actionLabel: String
        get() = if (isError) "Error" else "OK"

    override val withDismissAction: Boolean
        get() = false

    override val duration: SnackbarDuration
        get() = SnackbarDuration.Indefinite
}

val snackbarHostState = remember { SnackbarHostState() }
val scope = rememberCoroutineScope()
Scaffold(
    snackbarHost = {
        // reuse default SnackbarHost to have default animation and timing handling
        SnackbarHost(snackbarHostState) { data ->
            // custom snackbar with the custom action button color and border
            val isError = (data.visuals as? SnackbarVisualsWithError)?.isError ?: false
            val buttonColor =
                if (isError) {
                    ButtonDefaults.textButtonColors(
                        containerColor = MaterialTheme.colorScheme.errorContainer,
                        contentColor = MaterialTheme.colorScheme.error,
                    )
                } else {
                    ButtonDefaults.textButtonColors(
                        contentColor = MaterialTheme.colorScheme.inversePrimary
                    )
                }

            Snackbar(
                modifier =
                    Modifier.border(2.dp, MaterialTheme.colorScheme.secondary).padding(12.dp),
                action = {
                    TextButton(
                        onClick = { if (isError) data.dismiss() else data.performAction() },
                        colors = buttonColor,
                    ) {
                        Text(data.visuals.actionLabel ?: "")
                    }
                },
            ) {
                Text(data.visuals.message)
            }
        }
    },
    floatingActionButton = {
        var clickCount by remember { mutableStateOf(0) }
        ExtendedFloatingActionButton(
            onClick = {
                scope.launch {
                    snackbarHostState.showSnackbar(
                        SnackbarVisualsWithError(
                            "Snackbar # ${++clickCount}",
                            isError = clickCount % 2 != 0,
                        )
                    )
                }
            }
        ) {
            Text("Show snackbar")
        }
    },
    content = { innerPadding ->
        Text(
            text = "Custom Snackbar Demo",
            modifier = Modifier.padding(innerPadding).fillMaxSize().wrapContentSize(),
        )
    },
)

For a multiline sample following the Material recommended spec of a maximum of 2 lines, see:

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Snackbar
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.Text
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextOverflow

val snackbarHostState = remember { SnackbarHostState() }
val scope = rememberCoroutineScope()
Scaffold(
    snackbarHost = {
        SnackbarHost(snackbarHostState) { data ->
            Snackbar {
                // The Material spec recommends a maximum of 2 lines of text.
                Text(data.visuals.message, maxLines = 2, overflow = TextOverflow.Ellipsis)
            }
        }
    },
    floatingActionButton = {
        ExtendedFloatingActionButton(
            onClick = {
                scope.launch {
                    val longMessage =
                        "Very very very very very very very very very very very very very " +
                            "very very very very very very very very very very very very " +
                            "very very very very very very very very very very long message"
                    snackbarHostState.showSnackbar(longMessage)
                }
            }
        ) {
            Text("Show snackbar")
        }
    },
    content = { innerPadding ->
        Text(
            text = "Multiline Snackbar Demo",
            modifier = Modifier.padding(innerPadding).fillMaxSize().wrapContentSize(),
        )
    },
)

Parameters
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this snackbar
`action: (@Composable () -> Unit)? = null`	action / button component to add as an action to the snackbar. Consider using `ColorScheme.inversePrimary` as the color for the action, if you do not have a predefined color you wish to use instead.
`dismissAction: (@Composable () -> Unit)? = null`	action / button component to add as an additional close affordance action when a snackbar is non self-dismissive. Consider using `ColorScheme.inverseOnSurface` as the color for the action, if you do not have a predefined color you wish to use instead.
`actionOnNewLine: Boolean = false`	whether or not action should be put on a separate line. Recommended for action with long action text.
`shape: Shape = SnackbarDefaults.shape`	defines the shape of this snackbar's container
`containerColor: Color = SnackbarDefaults.color`	the color used for the background of this snackbar. Use `Color.Transparent` to have no color.
`contentColor: Color = SnackbarDefaults.contentColor`	the preferred color for content inside this snackbar
`actionContentColor: Color = SnackbarDefaults.actionContentColor`	the preferred content color for the optional `action` inside this snackbar
`dismissActionContentColor: Color = SnackbarDefaults.dismissActionContentColor`	the preferred content color for the optional `dismissAction` inside this snackbar
`content: @Composable () -> Unit`	content to show information about a process that an app has performed or will perform