← Back to Material 3 Compose
SnackbarHost
Component
in
Material 3
. Since 1.0.0Overview
Examples
Community Notes
@Composable
fun ScaffoldWithSimpleSnackbar() {
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()
)
}
)
}
@Composable
fun ScaffoldWithCustomSnackbar() {
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()
)
}
)
}

Previous Component← Snackbar
Next ComponentSuggestionChip →
