SushiSnackbar

A composable that displays a snackbar message with an optional action.

SushiSnackbar provides brief feedback about operations through a message at the bottom of the screen. It can include an action button and customizable styling. Snackbars are typically used to inform users of a process that an app has performed or will perform, and provide an opportunity to respond or undo that action.

Example

The SushiSnackbar component is typically used with a SushiSnackbarHostState to show messages:

// First, create and remember a snackbar host state
val snackbarHostState = remember { SushiSnackbarHostState() }
val scope = rememberCoroutineScope()

// Then, add the snackbar host to your Scaffold
Scaffold(
    modifier = Modifier.fillMaxSize(),
    snackbarHost = {
        SushiSnackbarHost(
            hostState = snackbarHostState,
            modifier = Modifier.padding(16.dp)
        )
    }
) { innerPadding ->
    // Your screen content

    // Button to trigger the snackbar
    SushiButton(
        props = SushiButtonProps(text = "Show Snackbar"),
        onClick = {
            scope.launch {
                // Basic snackbar
                val basicProps = SushiSnackbarProps(
                    message = SushiTextProps(
                        text = "This is a basic snackbar message",
                        type = SushiTextType.Regular400
                    ),
                    snackbarDuration = SushiSnackbarDuration.Short
                )
                snackbarHostState.showSnackbar(basicProps)

                // Snackbar with action
                val actionProps = SushiSnackbarProps(
                    message = SushiTextProps(text = "Item removed from cart"),
                    actionText = SushiTextProps(text = "UNDO"),
                    snackbarDuration = SushiSnackbarDuration.Long
                )
                snackbarHostState.showSnackbar(actionProps)

                // Custom colored snackbar
                val customProps = SushiSnackbarProps(
                    message = SushiTextProps(
                        text = "Payment successful!",
                        type = SushiTextType.Medium500,
                        color = SushiTheme.colors.white
                    ),
                    containerColor = SushiTheme.colors.surface.success,
                    contentColor = SushiTheme.colors.white,
                    snackbarDuration = SushiSnackbarDuration.Short
                )
                snackbarHostState.showSnackbar(customProps)
            }
        }
    )
}

Component API

SushiSnackbarProps

Parameter	Description
message	The main text message to display in the snackbar
containerColor	The background color of the snackbar
contentColor	The color of the text content
actionText	The text for the optional action button
snackbarDuration	Controls how long the snackbar remains visible

SushiSnackbarDuration

Value	Description
Short	Displayed for a brief period (1500ms)
Long	Displayed for a longer period (3500ms)
Indefinite	Displayed until explicitly dismissed

SushiSnackbarHostState

The SushiSnackbarHostState class provides methods to control snackbars:

Method	Description
showSnackbar(snackbarProps: SushiSnackbarProps)	Shows a snackbar with the given properties
cancelSnackbar()	Dismisses the currently displayed snackbar