State of Compose 2023 results are in! Click here to learn more

← Back to Material 3 Compose

Snackbar

Component
in
Material 3
. Since 1.0.0

Overview

Code Examples

<a href="https://m3.material.io/components/snackbar/overview" class="external" target="_blank">Material Design snackbar</a>.

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

!Snackbar image(https://developer.android.com/images/reference/androidx/compose/material3/snackbar.png)

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 component provides only the visuals of the Snackbar. If you need to show a Snackbar with defaults on the screen, use SnackbarHostState.showSnackbar:

Overloads

Snackbar

@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
)

Parameters

NameDescription
modifierthe Modifier to be applied to this snackbar
actionaction / 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.
dismissActionaction / 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.
actionOnNewLinewhether or not action should be put on a separate line. Recommended for action with long action text.
shapedefines the shape of this snackbar's container
containerColorthe color used for the background of this snackbar. Use Color.Transparent to have no color.
contentColorthe preferred color for content inside this snackbar
actionContentColorthe preferred content color for the optional action inside this snackbar
dismissActionContentColorthe preferred content color for the optional dismissAction inside this snackbar
contentcontent to show information about a process that an app has performed or will perfor

Snackbar

@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,
)

Parameters

NameDescription
snackbarDatadata about the current snackbar showing via SnackbarHostState
modifierthe Modifier to be applied to this snackbar
actionOnNewLinewhether or not action should be put on a separate line. Recommended for action with long action text.
shapedefines the shape of this snackbar's container
containerColorthe color used for the background of this snackbar. Use Color.Transparent to have no color.
contentColorthe preferred color for content inside this snackbar
actionColorthe color of the snackbar's action
actionContentColorthe preferred content color for the optional action inside this snackbar. See SnackbarVisuals.actionLabel.
dismissActionContentColorthe preferred content color for the optional dismiss action inside this snackbar. See SnackbarVisuals.withDismissAction