<script>
	import { toasts, ToastContainer } from "@gitbutler/ui";

	function showToast() {
		toasts.success("Operation completed!");
	}
</script>

<button on:click={showToast}>Show Toast</button>

<!-- Add the container to your app root -->
<ToastContainer />

import { toasts } from "@gitbutler/ui";

// Different toast types
toasts.info("This is a info message");
toasts.success("Operation completed successfully!");
toasts.warning("Please review your changes");
toasts.error("Something went wrong");

import { toasts } from "@gitbutler/ui";

async function handleAsyncOperation() {
	const myPromise = fetch("/api/data");

	await toasts.promise(myPromise, {
		loading: "Loading data...",
		success: "Data loaded successfully!",
		error: "Failed to load data",
	});
}

toasts.clearAll(); // Removes all current toasts