#! /usr/bin/env markdown

Snackbar

Snackbar is a lightweight feedback component in Miuix used to display brief messages at the bottom of the screen. It can optionally provide actions such as “Undo” and supports different display durations.

Import

import top.yukonga.miuix.kmp.basic.Snackbar
import top.yukonga.miuix.kmp.basic.SnackbarHost
import top.yukonga.miuix.kmp.basic.SnackbarHostState
import top.yukonga.miuix.kmp.basic.SnackbarDuration
import top.yukonga.miuix.kmp.basic.SnackbarResult

Basic Usage

The Snackbar is usually used together with Scaffold. You create a SnackbarHostState, pass it to SnackbarHost, and then call showSnackbar to display messages:a

val snackbarHostState = remember { SnackbarHostState() }
val scope = rememberCoroutineScope()

Scaffold(
    snackbarHost = {
        SnackbarHost(state = snackbarHostState)
    },
) { paddingValues ->
    Box(
        modifier = Modifier
            .padding(paddingValues),
    ) {
        TextButton(
            text = "Show message",
            onClick = {
                scope.launch {
                    snackbarHostState.showSnackbar("This is a short message")
                }
            },
        )
    }
}

SnackbarHostState and showSnackbar

SnackbarHostState manages a queue of Snackbar messages.

showSnackbar

suspend fun SnackbarHostState.showSnackbar(
    message: String,
    actionLabel: String? = null,
    withDismissAction: Boolean = false,
    duration: SnackbarDuration = SnackbarDuration.Short,
): SnackbarResult

Parameter Name	Type	Description	Default Value	Required
message	String	Text shown in the Snackbar	-	Yes
actionLabel	String?	Optional label for the action button	null	No
withDismissAction	Boolean	Whether to show a dismiss icon	false	No
duration	SnackbarDuration	Duration that the Snackbar stays visible	SnackbarDuration.Short	No

The return value SnackbarResult indicates whether the Snackbar was dismissed or the action was performed.

Getting the oldest or newest Snackbar

suspend fun SnackbarHostState.newestSnackbarData(): SnackbarData?
suspend fun SnackbarHostState.oldestSnackbarData(): SnackbarData?

These helpers allow you to manually dismiss the newest or oldest visible Snackbar via dismiss() or performAction().

SnackbarHost

SnackbarHost is responsible for rendering the Snackbars based on the given SnackbarHostState.

@Composable
fun SnackbarHost(
    state: SnackbarHostState,
    modifier: Modifier = Modifier,
    canSwipeToDismiss: Boolean = true,
    content: @Composable (SnackbarData) -> Unit = { Snackbar(it) },
)

Parameter Name	Type	Description	Default Value	Required
state	SnackbarHostState	State that holds the Snackbar queue	-	Yes
modifier	Modifier	Modifier applied to the host container	Modifier	No
canSwipeToDismiss	Boolean	Whether Snackbars can be dismissed by swipe	true	No
content	@Composable (SnackbarData) -> Unit	Custom content for each Snackbar item	{ Snackbar(it) }	No

In most cases you can keep the default content which uses the built‑in Snackbar composable.

Snackbar

Snackbar defines the default visual style for messages.

@Composable
fun Snackbar(
    data: SnackbarData,
    modifier: Modifier = Modifier,
    cornerRadius: Dp = SnackbarDefaults.CornerRadius,
    colors: SnackbarColors = SnackbarDefaults.snackbarColors(),
    insideMargin: PaddingValues = SnackbarDefaults.InsideMargin,
)

Parameter Name	Type	Description	Default Value	Required
data	SnackbarData	Data describing message and actions	-	Yes
modifier	Modifier	Modifier applied to the Snackbar container	Modifier	No
cornerRadius	Dp	Corner radius of the Snackbar	SnackbarDefaults.CornerRadius	No
colors	SnackbarColors	Color configuration for the Snackbar	SnackbarDefaults.snackbarColors()	No
insideMargin	PaddingValues	Inner padding of the Snackbar content	SnackbarDefaults.InsideMargin	No

SnackbarColors and SnackbarDefaults

SnackbarColors defines the color set used by the Snackbar:

data class SnackbarColors(
    val containerColor: Color,
    val contentColor: Color,
    val actionContentColor: Color,
    val dismissActionContentColor: Color,
    val actionContainerColor: Color,
)

You can create a color configuration via SnackbarDefaults.snackbarColors:

val colors = SnackbarDefaults.snackbarColors(
    containerColor = MiuixTheme.colorScheme.onSecondaryVariant,
    contentColor = MiuixTheme.colorScheme.secondaryVariant,
    actionContentColor = MiuixTheme.colorScheme.onPrimary,
    dismissActionContentColor = MiuixTheme.colorScheme.onSurfaceContainerVariant,
    actionContainerColor = MiuixTheme.colorScheme.primary,
)

By default the Snackbar uses an inverse surface tone (a dark bar in light theme, a light bar in dark theme) so it stands out over the content behind it.

The action label is rendered as a filled pill; actionContainerColor is its background and actionContentColor its text color, so override them together to keep enough contrast.

Constants

SnackbarDefaults also exposes the default dimensions and paddings used by Snackbar:

Constant Name	Type	Description	Default Value
CornerRadius	Dp	Default corner radius of the Snackbar	16.dp
InsideMargin	PaddingValues	Default inner padding of the Snackbar content	PaddingValues(all = 12.dp)
OuterPadding	PaddingValues	Default outer padding around the Snackbar	PaddingValues(start = 12.dp, end = 12.dp, top = 8.dp)
ActionCornerRadius	Dp	Default corner radius of the action pill	50.dp
ActionInsideMargin	PaddingValues	Default inner padding of the action pill	PaddingValues(horizontal = 12.dp, vertical = 0.dp)

SnackbarDuration and SnackbarResult

SnackbarDuration

SnackbarDuration controls how long the Snackbar stays visible:

sealed interface SnackbarDuration {
    data object Short : SnackbarDuration
    data object Long : SnackbarDuration
    data object Indefinite : SnackbarDuration
    data class Custom(val durationMillis: Long) : SnackbarDuration
}

Option	Description	Duration
Short	Short message	About 4 seconds
Long	Longer message	About 10 seconds
Indefinite	Stays until dismissed or action fired	Until dismissed
Custom	Custom duration in milliseconds	User‑specified

SnackbarResult

SnackbarResult describes how the Snackbar was completed:

enum class SnackbarResult {
    Dismissed,
    ActionPerformed,
}

Advanced Usage

Snackbar with action

val snackbarHostState = remember { SnackbarHostState() }
val scope = rememberCoroutineScope()

TextButton(
    text = "Show action",
    onClick = {
        scope.launch {
            val result = snackbarHostState.showSnackbar(
                message = "This message has an action",
                actionLabel = "Undo",
                duration = SnackbarDuration.Short,
            )
            when (result) {
                SnackbarResult.ActionPerformed -> { /* handle undo */ }
                SnackbarResult.Dismissed -> { /* handle timeout */ }
            }
        }
    },
)

Dismissible and indefinite Snackbar

val snackbarHostState = remember { SnackbarHostState() }
val scope = rememberCoroutineScope()

TextButton(
    text = "Show indefinite",
    onClick = {
        scope.launch {
            snackbarHostState.showSnackbar(
                message = "Indefinite message, dismiss manually",
                withDismissAction = true,
                duration = SnackbarDuration.Indefinite,
            )
        }
    },
)

TextButton(
    text = "Dismiss oldest",
    onClick = {
        scope.launch {
            snackbarHostState.oldestSnackbarData()?.dismiss()
        }
    },
)

Changelog

Last edited 4 months ago

View full history

f6f9342-library: redesign Snackbar component

14e6f36-docs: align components/guides with current API

821b26f-library: Snackbar: extract hardcoded defaults to SnackbarDefaults

0b7ec07-library: refactor: unify dropdown and spinner components (#315)

007e8c4-docs: Add doc about Snackbar