Create toast message with state.

src/lib/toast/Toast.svelte

@@ -0,0 +1,33 @@
+<script>
+	import Portal from '../Portal.svelte';
+	import { toast } from './toast';
+</script>
+
+<Portal>
+	<div class="toast-wrapper">
+		{#each $toast as message}
+			<div class="toast">
+				<p>{message}</p>
+			</div>
+		{/each}
+	</div>
+</Portal>
+
+<style>
+	.toast-wrapper {
+		position: fixed;
+		bottom: 0;
+		right: 20px;
+	}
+
+	.toast {
+		margin-bottom: 1rem;
+		padding: 20px;
+		border-radius: 15px;
+		box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
+	}
+
+	p {
+		margin: 0;
+	}
+</style>

src/lib/toast/toast.js

@@ -0,0 +1,15 @@
+import { writable } from "svelte/store";
+
+const newToast = () => {
+  const { subscribe, update } = writable([]);
+  
+  function send(message) {
+    update((state) => {
+      return [...state, message];
+    })
+  }
+
+  return { subscribe, send };
+}
+
+export const toast = newToast();

src/routes/index.svelte

@@ -3,6 +3,8 @@
 	import Field from '$lib/Field.svelte';
 	import Markdown from '$lib/Markdown.svelte';
 	import Modal from '$lib/Modal.svelte';
+	import Toast from '$lib/toast/Toast.svelte';
+	import { toast } from '$lib/toast/toast';
 	import Portal from '$lib/Portal.svelte';
 	// import BetterAccordion from '$lib/BetterAccordion.svelte';
 	// import Toggle from '$lib/Toggle.svelte';
@@ -23,7 +25,11 @@
 		<Field value={0} label="Number" type="number" />
 	</div>
 </Modal>
-<button on:click={() => (isModalOpen = true)}>Open Modal Form</button>
+
+<Toast />
+<button on:click={() => toast.send('New Message')}>New Toast</button>
+
+<!-- <button on:click={() => (isModalOpen = true)}>Open Modal Form</button> -->
 
 <SearchFilter {items} bind:search />