# SnackbarHostState

Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/SnackbarHost.kt+class:androidx.compose.material3.SnackbarHostState) Common/AllAndroid/JVM
- Cmn

  ```
  class SnackbarHostState
  ```

*** ** * ** ***

State of the `https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarHost.composable#SnackbarHost(androidx.compose.material3.SnackbarHostState,androidx.compose.ui.Modifier,kotlin.Function1)`, which controls the queue and the current `https://developer.android.com/reference/kotlin/androidx/compose/material3/Snackbar.composable#Snackbar(androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function0)` being shown inside the `https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarHost.composable#SnackbarHost(androidx.compose.material3.SnackbarHostState,androidx.compose.ui.Modifier,kotlin.Function1)`.

This state is usually `https://developer.android.com/reference/kotlin/androidx/compose/runtime/remember.composable#remember(kotlin.Function0)`ed and used to provide a `https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarHost.composable#SnackbarHost(androidx.compose.material3.SnackbarHostState,androidx.compose.ui.Modifier,kotlin.Function1)` to a `https://developer.android.com/reference/kotlin/androidx/compose/material3/Scaffold.composable#Scaffold(androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.material3.FabPosition,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)`.

## Summary

| ### Public constructors |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarHostState#SnackbarHostState()()` | Cmn |

| ### Public functions |
|---|---|---|
| `suspend https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarResult` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarHostState#showSnackbar(androidx.compose.material3.SnackbarVisuals)(visuals: https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarVisuals)` Shows or queues to be shown a `https://developer.android.com/reference/kotlin/androidx/compose/material3/Snackbar.composable#Snackbar(androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function0)` at the bottom of the `https://developer.android.com/reference/kotlin/androidx/compose/material3/Scaffold.composable#Scaffold(androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.material3.FabPosition,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)` to which this state is attached and suspends until the snackbar has disappeared. | Cmn |
| `suspend https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarResult` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarHostState#showSnackbar(kotlin.String,kotlin.String,kotlin.Boolean,androidx.compose.material3.SnackbarDuration)( message: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html, actionLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html?, withDismissAction: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, duration: https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarDuration )` Shows or queues to be shown a `https://developer.android.com/reference/kotlin/androidx/compose/material3/Snackbar.composable#Snackbar(androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function0)` at the bottom of the `https://developer.android.com/reference/kotlin/androidx/compose/material3/Scaffold.composable#Scaffold(androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.material3.FabPosition,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)` to which this state is attached and suspends until the snackbar has disappeared. | Cmn |

| ### Public properties |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarData?` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarHostState#currentSnackbarData()` The current `https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarData` being shown by the `https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarHost.composable#SnackbarHost(androidx.compose.material3.SnackbarHostState,androidx.compose.ui.Modifier,kotlin.Function1)`, or `null` if none. | Cmn |

## Public constructors

### SnackbarHostState

Cmn

```
SnackbarHostState()
```

## Public functions

### showSnackbar

Cmn

```
suspend fun showSnackbar(visuals: SnackbarVisuals): SnackbarResult
```

Shows or queues to be shown a `https://developer.android.com/reference/kotlin/androidx/compose/material3/Snackbar.composable#Snackbar(androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function0)` at the bottom of the `https://developer.android.com/reference/kotlin/androidx/compose/material3/Scaffold.composable#Scaffold(androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.material3.FabPosition,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)` to which this state is attached and suspends until the snackbar has disappeared.

`https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarHostState` guarantees to show at most one snackbar at a time. If this function is called while another snackbar is already visible, it will be suspended until this snackbar is shown and subsequently addressed. If the caller is cancelled, the snackbar will be removed from display and/or the queue to be displayed.

All of this allows for granular control over the snackbar queue from within:

```kotlin
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Snackbar
import androidx.compose.material3.SnackbarDuration
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.SnackbarVisuals
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

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(),
        )
    },
)
```

| Parameters |
|---|---|
| `visuals: https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarVisuals` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarVisuals` that are used to create a Snackbar |

| Returns |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarResult` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarResult#ActionPerformed` if option action has been clicked or `https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarResult#Dismissed` if snackbar has been dismissed via timeout or by the user |

### showSnackbar

Cmn

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

Shows or queues to be shown a `https://developer.android.com/reference/kotlin/androidx/compose/material3/Snackbar.composable#Snackbar(androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function0)` at the bottom of the `https://developer.android.com/reference/kotlin/androidx/compose/material3/Scaffold.composable#Scaffold(androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.material3.FabPosition,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)` to which this state is attached and suspends until the snackbar has disappeared.

`https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarHostState` guarantees to show at most one snackbar at a time. If this function is called while another snackbar is already visible, it will be suspended until this snackbar is shown and subsequently addressed. If the caller is cancelled, the snackbar will be removed from display and/or the queue to be displayed.

All of this allows for granular control over the snackbar queue from within:

```kotlin
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Snackbar
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.SnackbarResult
import androidx.compose.material3.Text
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier

// decouple snackbar host state from scaffold state for demo purposes
// this state, channel and flow is for demo purposes to demonstrate business logic layer
val snackbarHostState = remember { SnackbarHostState() }
// we allow only one snackbar to be in the queue here, hence conflated
val channel = remember { Channel<Int>(Channel.CONFLATED) }
LaunchedEffect(channel) {
    channel.receiveAsFlow().collect { index ->
        val result =
            snackbarHostState.showSnackbar(
                message = "Snackbar # $index",
                actionLabel = "Action on $index",
            )
        when (result) {
            SnackbarResult.ActionPerformed -> {
                /* action has been performed */
            }
            SnackbarResult.Dismissed -> {
                /* dismissed, no action needed */
            }
        }
    }
}
Scaffold(
    snackbarHost = { SnackbarHost(snackbarHostState) },
    floatingActionButton = {
        var clickCount by remember { mutableStateOf(0) }
        ExtendedFloatingActionButton(
            onClick = {
                // offset snackbar data to the business logic
                channel.trySend(++clickCount)
            }
        ) {
            Text("Show snackbar")
        }
    },
    content = { innerPadding ->
        Text(
            "Snackbar demo",
            modifier = Modifier.padding(innerPadding).fillMaxSize().wrapContentSize(),
        )
    },
)
```

To change the Snackbar appearance, change it in 'snackbarHost' on the `https://developer.android.com/reference/kotlin/androidx/compose/material3/Scaffold.composable#Scaffold(androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.material3.FabPosition,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)`.

| Parameters |
|---|---|
| `message: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html` | text to be shown in the Snackbar |
| `actionLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html? = null` | optional action label to show as button in the Snackbar |
| `withDismissAction: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | a boolean to show a dismiss action in the Snackbar. This is recommended to be set to true for better accessibility when a Snackbar is set with a `https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarDuration#Indefinite` |
| `duration: https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarDuration = if (actionLabel == null) SnackbarDuration.Short else SnackbarDuration.Indefinite` | duration to control how long snackbar will be shown in `https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarHost.composable#SnackbarHost(androidx.compose.material3.SnackbarHostState,androidx.compose.ui.Modifier,kotlin.Function1)`, either `https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarDuration#Short`, `https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarDuration#Long` or `https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarDuration#Indefinite`. |

| Returns |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarResult` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarResult#ActionPerformed` if option action has been clicked or `https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarResult#Dismissed` if snackbar has been dismissed via timeout or by the user |

## Public properties

### currentSnackbarData

Cmn

```
val currentSnackbarData: SnackbarData?
```

The current `https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarData` being shown by the `https://developer.android.com/reference/kotlin/androidx/compose/material3/SnackbarHost.composable#SnackbarHost(androidx.compose.material3.SnackbarHostState,androidx.compose.ui.Modifier,kotlin.Function1)`, or `null` if none.