ComposeToast

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.

#windows
#wasm
#desktop
#compose-multiplatform
#compose

Suggest an edit

Android JVMJVMKotlin/NativeWasmJS

GitHub stars1

AuthorsOCNYang

Open issues1

Creation date4 months ago

Last activity4 months ago

Latest release1.0.0 (4 months ago)

Homepage GitHub repository GitHub pages Wiki page

Compose Toast

English | 简体中文

A beautiful, customizable Toast library for Kotlin Multiplatform Compose with support for Android, iOS, Desktop, Web, and WASM.

Live Demo

Try the Web Demo

Experience all the Toast features directly in your browser!

Features

✅ Kotlin Multiplatform - Works on Android, iOS, Desktop, Web, and WASM
🎨 Fully Customizable - Custom colors, icons, and layouts
📍 Multiple Positions - Top, Center, Bottom
⚡ Action Buttons - Add interactive action buttons to your toasts
🔄 Queue Management - Automatic toast queue with smooth transitions
🎭 Built-in Types - Success, Error, Warning, Info with default styling
🪟 Dialog Support - Works correctly inside Dialogs across all platforms
🎯 Type-Safe API - Kotlin-first API with default parameters

Installation

Step 1: Add JitPack repository

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") }
    }
}

Step 2: Add the dependency

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.

Quick Start

1. Setup ToastManager at your app root

@Composable
fun App() {
    MaterialTheme {
        ProvideToastManager {
            YourAppContent()
        }
    }
}

2. Show Toasts from anywhere

// 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
)

Usage Examples

Toast with Action Button

Toast.show(
    message = "Item deleted from cart",
    actions = arrayOf(
        ActionData("Undo") {
            Toast.showSuccess("Action undone!")
        }
    )
)

Custom Position

// 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)

Custom Duration

Toast.show(
    message = "This stays for 6 seconds",
    duration = 6000L
)

In Dialogs

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")
            }
        }
    )
}

Custom Toast Layout

You can provide a completely custom Toast layout:

ProvideToastManager(
    toastContent = { toastData, maxWidth, onDismiss ->
        CustomToastContent(toastData, maxWidth, onDismiss)
    }
) {
    YourAppContent()
}

Using ToastManager directly

@Composable
fun MyScreen() {
    val toastManager = rememberToastManager()

    Button(onClick = {
        toastManager.showSuccess("Clicked!")
    }) {
        Text("Click Me")
    }
}

API Reference

Toast (Global Object)

Toast.show() - Show custom toast
Toast.showSuccess() - Show success toast
Toast.showError() - Show error toast
Toast.showWarning() - Show warning toast
Toast.showInfo() - Show info toast
Toast.clear() - Clear all toasts

ToastManager (Instance)

Use when you need more control or working with Dialogs:

toastManager.showToast() - Show custom toast
toastManager.showSuccess() - Show success toast
toastManager.showError() - Show error toast
toastManager.showWarning() - Show warning toast
toastManager.showInfo() - Show info toast
toastManager.dismissCurrent() - Dismiss current toast
toastManager.clear() - Clear all toasts

Components

ProvideToastManager - Setup toast manager at app root
WithToastComposable - Provide isolated toast manager for dialogs
DialogToastContent - Wrapper for dialog content with toast support
rememberToastManager - Get current toast manager instance

Platform Support

Platform	Support
Android	✅
iOS	✅
Desktop	✅
Web (JS)	✅
WASM	✅

License

MIT License - see LICENSE file for details

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.