Snackbar

A short message about a process that just happened, with an optional action.

Category: Communication
API status: Stable
Compose APIs: SnackbarHost, SnackbarHostState, Snackbar, SnackbarDuration
Interactive page: https://m3e.ljzapps.app/#components/snackbar

When to use

Show a snackbar to confirm a result such as archived or sent, and offer a way to undo it. It appears at the bottom of the screen without interrupting what the user is doing.

Drive snackbars through a SnackbarHostState. showSnackbar suspends until the snackbar is dismissed and returns whether the action was used.

Playground

The interactive page has a playground with live property controls for this component and generated code.

Examples

With undo action

The result of the action is read from showSnackbar.

val snackbarHostState = remember { SnackbarHostState() }
val scope = rememberCoroutineScope()
var result by remember { mutableStateOf("") }

Box(modifier = Modifier.fillMaxWidth().height(220.dp)) {
    Button(
        onClick = {
            scope.launch {
                val outcome = snackbarHostState.showSnackbar(
                    message = "Message archived",
                    actionLabel = "Undo",
                    withDismissAction = true,
                )
                result = if (outcome == SnackbarResult.ActionPerformed) "Undo pressed" else ""
            }
        },
        modifier = Modifier.align(Alignment.TopStart),
    ) {
        Text("Show snackbar")
    }
    if (result.isNotEmpty()) {
        Text(result, modifier = Modifier.align(Alignment.TopEnd).padding(top = 12.dp))
    }
    SnackbarHost(hostState = snackbarHostState, modifier = Modifier.align(Alignment.BottomCenter))
}

Parameters

Name	Type	Default	Description
`message`	`String`		Text to show.
`actionLabel`	`String?`	`null`	Label of the single action. Without one the snackbar is a plain message.
`withDismissAction`	`Boolean`	`false`	Adds a close icon.
`duration`	`SnackbarDuration`	`Short, or Indefinite with an action`	How long it stays.

Guidelines

Do:

Use for confirmations the user can ignore.
Show one snackbar at a time.

Don't:

Do not use for errors that block progress. Use a dialog or inline message.
Do not add more than one action.

Accessibility

Snackbars are announced as live regions. Keep the message short and complete.
An action that expires after a few seconds is hard to use. Prefer Indefinite or a dismiss icon when the action matters.