Beautiful, customizable toast UI component with action buttons, multi-position placement, automatic queue management, dialog-safe display, built-in success, error, info and warning types, and a type-safe, easy API.
English | 简体中文
A beautiful, customizable Toast library for Kotlin Multiplatform Compose with support for Android, iOS, Desktop, Web, and WASM.
Experience all the Toast features directly in your browser!
Add it in your root build.gradle.kts at the end of repositories:
allprojects {
repositories {
maven { url = uri("https://jitpack.io") }
}
}
Or in settings.gradle.kts:
dependencyResolutionManagement {
repositories {
maven { url = uri("https://jitpack.io") }
}
}
In your module's build.gradle.kts:
kotlin {
sourceSets {
commonMain {
dependencies {
implementation("com.github.ocnyang:ComposeToast:1.0.0")
}
}
}
}
Replace ocnyang with your actual GitHub username and 1.0.0 with the desired version or tag.
@Composable
fun App() {
MaterialTheme {
ProvideToastManager {
YourAppContent()
}
}
}
// Success Toast
Toast.showSuccess("Operation completed!")
// Error Toast
Toast.showError("Something went wrong!")
// Warning Toast
Toast.showWarning("Please check your input")
// Info Toast
Toast.showInfo("Processing your request...")
// Custom Toast
Toast.show(
message = "Custom message",
imageVector = Icons.Default.Star,
backgroundColor = Color.Blue,
textColor = Color.White,
duration = 3000L,
position = ToastPosition.TOP
)
Toast.show(
message = "Item deleted from cart",
actions = arrayOf(
ActionData("Undo") {
Toast.showSuccess("Action undone!")
}
)
)
// Top position
Toast.show("Message at top", position = ToastPosition.TOP)
// Center position
Toast.show("Message at center", position = ToastPosition.CENTER)
// Bottom position (default)
Toast.show("Message at bottom", position = ToastPosition.BOTTOM)
Toast.show(
message = "This stays for 6 seconds",
duration = 6000L
)
For proper Toast display in Dialogs (especially on Android/iOS):
var showDialog by remember { mutableStateOf(false) }
WithToastComposable(show = showDialog) { toastManager ->
AlertDialog(
onDismissRequest = { showDialog = false },
title = { Text("Dialog Example") },
text = {
DialogToastContent(toastManager = toastManager) {
Text("Click the button to show a toast!")
}
},
confirmButton = {
Button(onClick = {
toastManager.showSuccess("Toast from Dialog!")
}) {
Text("Show Toast")
}
}
)
}
You can provide a completely custom Toast layout:
ProvideToastManager(
toastContent = { toastData, maxWidth, onDismiss ->
CustomToastContent(toastData, maxWidth, onDismiss)
}
) {
YourAppContent()
}
@Composable
fun MyScreen() {
val toastManager = rememberToastManager()
Button(onClick = {
toastManager.showSuccess("Clicked!")
}) {
Text("Click Me")
}
}
Toast.show() - Show custom toastToast.showSuccess() - Show success toastToast.showError() - Show error toastToast.showWarning() - Show warning toastToast.showInfo() - Show info toastUse when you need more control or working with Dialogs:
toastManager.showToast() - Show custom toasttoastManager.showSuccess() - Show success toastProvideToastManager - Setup toast manager at app rootWithToastComposable - Provide isolated toast manager for dialogsDialogToastContent - Wrapper for dialog content with toast supportrememberToastManager - Get current toast manager instance| Platform | Support |
|---|---|
| Android | ✅ |
MIT License - see LICENSE file for details
Contributions are welcome! Please feel free to submit a Pull Request.
Toast.clear() - Clear all toaststoastManager.showError()toastManager.showWarning() - Show warning toasttoastManager.showInfo() - Show info toasttoastManager.dismissCurrent() - Dismiss current toasttoastManager.clear() - Clear all toasts| iOS | ✅ |
| Desktop | ✅ |
| Web (JS) | ✅ |
| WASM | ✅ |
Surfaced from shared tags and platforms — no rankings paid for.