# 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.

```kotlin
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.

## Related components

- [Dialog](https://m3e.ljzapps.app/docs/components/dialog.md)
- [Buttons](https://m3e.ljzapps.app/docs/components/button.md)