Design/net.ikea.skapa.ui.components/Toast

Toast

@Composable
fun Toast(message: String, modifier: Modifier = Modifier, dismissParams: DismissParams, actionLabel: String? = null, actionOnClick: () -> Unit? = null)

Toast component displays a brief, non-interruptive message that floats in front of the screen. It is built to be used in conjunction with Scaffold and SnackbarHost in the same manner as Material Design Snackbar, using snackbarData for input. Comes with predefined appearance based on Skapa design and guidelines.

Toast 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. An optional action button is available for the Toast and should be used in accordance to Material guidelines, the action should be able to replicated in the same view as the Toast is triggered from.

Parameters

message

The message text to be displayed.

modifier

Modifier to be applied to the component.

dismissParams

dismiss button parameters DismissParams.

actionLabel

The optional action button text to be displayed.

actionOnClick

Will be called when the user clicks the action button.

See also

Samples

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.material3.SnackbarData
import androidx.compose.material3.SnackbarDuration
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import kotlinx.coroutines.launch
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.Button
import net.ikea.skapa.ui.components.ButtonVariant
import net.ikea.skapa.ui.components.DismissParams
import net.ikea.skapa.ui.components.Toast

fun main() { 
   //sampleStart 
   SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    val state = remember { SnackbarHostState() }
    val coroutineScope = rememberCoroutineScope()

    // Native Android Snackbar
    SnackbarHost(hostState = state) { snackbarData: SnackbarData ->
        // Skapa Toast component
        Toast(
            message = snackbarData.visuals.message,
            actionLabel = snackbarData.visuals.actionLabel,
            dismissParams = DismissParams(
                onDismissRequest = { state.currentSnackbarData?.dismiss() },
                dismissButtonContentDescription = "Dismiss"
            ),
            actionOnClick = {
                /* Do something */
            }
        )
    }

    Button(
        modifier = Modifier.fillMaxWidth(),
        label = "show Toast",
        variant = ButtonVariant.Primary,
        onClick = {
            coroutineScope.launch {
                state.showSnackbar(
                    message = "This item needs to be measured",
                    actionLabel = "toast label if needed",
                    duration = SnackbarDuration.Long // can also use .Short and .Indefinite
                )
            }
        }
    )
} 
   //sampleEnd
}