diff --git a/.editorconfig b/.editorconfig
index 81274ea2f6..8b09ff3c1f 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -5,7 +5,6 @@ charset = utf-8
 end_of_line = lf
 indent_style = tab
 insert_final_newline = true
-max_line_length = 80
 trim_trailing_whitespace = true
 
 [*.md]
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 3dc58c8f99..3361c50f18 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -15,6 +15,7 @@ const trustedDependencies = new Set([
 	'@metatypes/typography',
 	'@metatypes/units',
 	'filesize',
+	'nanoid',
 	'zod',
 ])
 
diff --git a/internals/fake-root/package.json b/internals/fake-root/package.json
index 995d6f93a5..35539ab84b 100644
--- a/internals/fake-root/package.json
+++ b/internals/fake-root/package.json
@@ -3,7 +3,7 @@
 	"private": true,
 	"scripts": {
 		"check:eslint": "yarn --cwd ../.. run eslint --max-warnings=0 --ignore-pattern=internals --ignore-pattern=packages .",
-		"check:knip": "yarn --cwd ../.. run knip",
+		"check:knip": "yarn --cwd ../.. run knip --tags=-knipignore",
 		"check:prettier": "yarn --cwd ../.. run prettier --check --ignore-path=.fake-prettierignore --ignore-path=.prettierignore .",
 		"fix:eslint": "yarn run check:eslint --fix",
 		"fix:prettier": "yarn run check:prettier --write"
diff --git a/packages/documentation/assets/img/banner_alert.png b/packages/documentation/assets/img/banner_alert.png
deleted file mode 100644
index c0318daad6..0000000000
Binary files a/packages/documentation/assets/img/banner_alert.png and /dev/null differ
diff --git a/packages/documentation/assets/img/banner_expand.png b/packages/documentation/assets/img/banner_expand.png
deleted file mode 100644
index 8b30ff8ffd..0000000000
Binary files a/packages/documentation/assets/img/banner_expand.png and /dev/null differ
diff --git a/packages/documentation/components/CodePreviewNew.vue b/packages/documentation/components/CodePreviewNew.vue
new file mode 100644
index 0000000000..3a50aa6e19
--- /dev/null
+++ b/packages/documentation/components/CodePreviewNew.vue
@@ -0,0 +1,167 @@
+<template>
+	<div :class="[$style.wrapper, $style[`wrapper--is-type-${type}`]]">
+		<section v-if="$slots.default" :class="$style.example">
+			<slot />
+		</section>
+		<div v-else style="margin-bottom: -1px" />
+		<div v-if="code" :class="$style.actions">
+			<div v-if="fileName" :class="$style.fileName" v-text="fileName" />
+			<div :class="$style.language" v-text="language" />
+			<div
+				v-if="type !== 'default'"
+				:class="$style.language"
+				v-text="`(${type.toUpperCase()})`"
+			/>
+			<div :class="$style.copyButton" role="button" @click="onCopy">
+				<i class="yoco">copy</i>
+			</div>
+		</div>
+		<div v-if="code" :class="$style.code">
+			<pre v-text="dedentedCode" />
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import copy from 'copy-to-clipboard'
+import dedent from 'ts-dedent'
+import { computed, defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
+import { error, success } from '~/utilities/toaster'
+
+/**
+ * Port of an equivalent component from 'vue3/upgrade'. Used to document the new kt-toaster
+ * TODO: remove in vue3
+ */
+export default defineComponent({
+	name: 'CodePreviewNew',
+	props: {
+		code: { default: null, type: String as PropType<string | null> },
+		fileName: { default: null, type: String },
+		language: { required: true, type: String },
+		type: {
+			default: 'default',
+			type: String as PropType<'default' | 'preview'>,
+		},
+	},
+	setup(props) {
+		const dedentedCode = computed(() =>
+			dedent(props.code ?? '')
+				.split('\n')
+				.map((line) => line.replace('//--', ''))
+				.join('\n'),
+		)
+		return {
+			dedentedCode,
+			onCopy: () => {
+				const wasSuccessful = copy(dedentedCode.value)
+
+				if (wasSuccessful)
+					// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+					// @ts-ignore nuxt typescript does not like this for some reason
+					success({
+						// eslint-disable-next-line no-magic-numbers
+						text: `copied “${dedentedCode.value.slice(0, 40)}...” to clipboard`,
+					})
+				else
+					error({
+						text: 'There was a failure when copying to clipboard',
+					})
+			},
+		}
+	},
+})
+</script>
+
+<style module>
+.wrapper {
+	margin-block: var(--unit-8);
+	overflow: hidden;
+	border: 1px solid transparent;
+	border-radius: var(--border-radius);
+}
+
+.wrapper--is-type-default {
+	border-color: var(--gray-20);
+
+	.actions {
+		background-color: var(--gray-10);
+		border-top-color: var(--gray-20);
+		border-bottom-color: var(--gray-20);
+	}
+
+	.code > * {
+		background-color: var(--gray-10) !important;
+	}
+}
+
+.wrapper--is-type-preview {
+	border-color: var(--orange-20);
+	border-style: dashed;
+	opacity: 0.667;
+
+	.actions {
+		background-color: var(--yellow-20);
+		border-style: dashed;
+		border-top-color: var(--yellow-50);
+		border-bottom-color: var(--orange-20);
+	}
+
+	.code > * {
+		background-color: var(--yellow-20) !important;
+	}
+}
+
+.actions,
+.code > * {
+	padding: var(--unit-3) var(--unit-6);
+}
+
+.actions {
+	display: flex;
+	gap: var(--unit-6);
+	align-items: center;
+	border: 1px solid transparent;
+}
+
+.code {
+	pre {
+		tab-size: 3;
+	}
+
+	> * {
+		margin: 0;
+		overflow-x: auto;
+	}
+}
+
+/* stylelint-disable selector-class-pattern */
+.copyButton {
+	display: flex;
+	padding: var(--unit-2);
+	margin: calc(-1 * var(--unit-2));
+	margin-left: auto; /* push to end of flexbox */
+	font-size: 1.2rem;
+	user-select: none;
+
+	&:hover {
+		color: var(--interactive-01);
+	}
+}
+
+.example {
+	padding: var(--unit-6);
+}
+
+.fileName,
+.language {
+	font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+		'Courier New', monospace;
+}
+
+.fileName {
+	font-weight: bold;
+}
+/* stylelint-enable selector-class-pattern */
+</style>
diff --git a/packages/documentation/components/ColorPalette.vue b/packages/documentation/components/ColorPalette.vue
index 1505f9faad..23a18d1d08 100644
--- a/packages/documentation/components/ColorPalette.vue
+++ b/packages/documentation/components/ColorPalette.vue
@@ -11,17 +11,15 @@
 			<div class="color-palette__name" v-text="color.name" />
 			<div class="color-palette__code" v-text="color.code" />
 		</div>
-		<transition name="slide-fade">
-			<div v-if="copySuccess" class="success-message">Copy successful</div>
-		</transition>
 	</div>
 </template>
 
 <script lang="ts">
-import { TimeConversion } from '@metatypes/units'
 import copy from 'copy-to-clipboard'
 import type { PropType } from 'vue'
-import { defineComponent, ref } from 'vue'
+import { defineComponent } from 'vue'
+
+import { error, success } from '~/utilities/toaster'
 
 export default defineComponent({
 	name: 'ColorPalette',
@@ -33,22 +31,19 @@ export default defineComponent({
 		},
 	},
 	setup() {
-		const copySuccess = ref(false)
-
 		return {
 			copyColor: (codeString: string) => {
 				const wasSuccessful = copy(codeString)
 				if (wasSuccessful) {
-					copySuccess.value = true
-					window.setTimeout(() => {
-						copySuccess.value = false
-					}, TimeConversion.MILLISECONDS_PER_SECOND)
+					success({
+						text: `Copied color "${codeString}"`,
+					})
 				} else {
-					// eslint-disable-next-line no-alert
-					window.alert('failed')
+					error({
+						text: 'There was a failure when copying to clipboard',
+					})
 				}
 			},
-			copySuccess,
 			textColor: (colorName: string) => {
 				if (
 					colorName === 'Lightgray-300' ||
diff --git a/packages/documentation/components/ComponentInfo.vue b/packages/documentation/components/ComponentInfo.vue
index 594202344f..221357e7c6 100644
--- a/packages/documentation/components/ComponentInfo.vue
+++ b/packages/documentation/components/ComponentInfo.vue
@@ -62,7 +62,6 @@
 				</div>
 			</section>
 		</article>
-		<ComponentInfoSlots :slots="component.meta.slots" />
 		<KtHeading
 			v-if="component.props"
 			text="Properties"
@@ -141,6 +140,8 @@
 				</template>
 			</div>
 		</KtHeading>
+
+		<ComponentInfoSlots :slots="component.meta.slots" />
 	</div>
 </template>
 
diff --git a/packages/documentation/components/MyToaster.vue b/packages/documentation/components/MyToaster.vue
new file mode 100644
index 0000000000..49b0159e4f
--- /dev/null
+++ b/packages/documentation/components/MyToaster.vue
@@ -0,0 +1,37 @@
+<template>
+	<KtToaster :toaster="toaster">
+		<template #error>
+			<KtToast type="error" />
+		</template>
+		<template #info>
+			<KtToast type="info" />
+		</template>
+		<template #success>
+			<KtToast type="success" />
+		</template>
+		<template #warning>
+			<KtToast type="warning" />
+		</template>
+	</KtToaster>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import { KtToast, KtToaster } from '@3yourmind/kotti-ui'
+
+import { toaster } from '~/utilities/toaster'
+
+export default defineComponent({
+	name: 'MyToaster',
+	components: {
+		KtToast,
+		KtToaster,
+	},
+	setup() {
+		return {
+			toaster,
+		}
+	},
+})
+</script>
diff --git a/packages/documentation/components/YocoPreview.vue b/packages/documentation/components/YocoPreview.vue
index 44211b3c38..1f5fa59951 100644
--- a/packages/documentation/components/YocoPreview.vue
+++ b/packages/documentation/components/YocoPreview.vue
@@ -18,22 +18,18 @@
 		<div class="copy copy-hover">
 			<div>Click to Copy</div>
 		</div>
-		<div
-			v-if="copySuccess"
-			class="success-message"
-			v-text="copyIconSuccessMessage"
-		/>
 	</div>
 </template>
 
 <script lang="ts">
-import { TimeConversion } from '@metatypes/units'
 import copy from 'copy-to-clipboard'
 import type { PropType } from 'vue'
-import { computed, defineComponent, ref } from 'vue'
+import { computed, defineComponent } from 'vue'
 
 import type { Yoco } from '@3yourmind/yoco'
 
+import { error, success } from '~/utilities/toaster'
+
 export default defineComponent({
 	name: 'YocoPreview',
 	props: {
@@ -41,8 +37,6 @@ export default defineComponent({
 		icon: { required: true, type: String as PropType<Yoco.Icon> },
 	},
 	setup(props) {
-		const copySuccess = ref(false)
-
 		return {
 			copyIconSuccessMessage: computed(() => `Copied icon "${props.icon}"`),
 			copyLiga: (yocoName: string) => {
@@ -50,16 +44,15 @@ export default defineComponent({
 				const wasSuccessful = copy(codeString)
 
 				if (wasSuccessful) {
-					copySuccess.value = true
-					window.setTimeout(() => {
-						copySuccess.value = false
-					}, 2 * TimeConversion.MILLISECONDS_PER_SECOND)
+					success({
+						text: `Copied icon "${props.icon}"`,
+					})
 				} else {
-					// eslint-disable-next-line no-alert
-					window.alert('failed')
+					error({
+						text: 'There was a failure when copying to clipboard',
+					})
 				}
 			},
-			copySuccess,
 			enumRepresentation: computed(() => `Yoco.Icon.${props.enum}`),
 		}
 	},
diff --git a/packages/documentation/layouts/default.vue b/packages/documentation/layouts/default.vue
index ff9610bb60..2af3bbffbe 100644
--- a/packages/documentation/layouts/default.vue
+++ b/packages/documentation/layouts/default.vue
@@ -13,6 +13,7 @@
 				</div>
 			</template>
 		</LayoutContainer>
+		<MyToaster />
 	</KtI18nContext>
 </template>
 
@@ -21,6 +22,7 @@ import { KtI18nContext } from '@3yourmind/kotti-ui'
 
 import ActionBar from '~/components/ActionBar.vue'
 import LayoutContainer from '~/components/LayoutContainer.vue'
+import MyToaster from '~/components/MyToaster.vue'
 import NavBar from '~/components/NavBar.vue'
 
 /* eslint-disable perfectionist/sort-objects */
@@ -29,6 +31,7 @@ export default {
 	components: {
 		ActionBar,
 		KtI18nContext,
+		MyToaster,
 		NavBar,
 		LayoutContainer,
 	},
diff --git a/packages/documentation/layouts/empty.vue b/packages/documentation/layouts/empty.vue
index 64567b3481..322305e09d 100644
--- a/packages/documentation/layouts/empty.vue
+++ b/packages/documentation/layouts/empty.vue
@@ -1,13 +1,19 @@
 <template>
 	<KtI18nContext locale="en-US">
 		<nuxt />
+		<MyToaster />
 	</KtI18nContext>
 </template>
 
 <script>
 import { defineComponent } from 'vue'
 
+import MyToaster from '~/components/MyToaster.vue'
+
 export default defineComponent({
 	name: 'EmptyLayout',
+	components: {
+		MyToaster,
+	},
 })
 </script>
diff --git a/packages/documentation/layouts/fullpage.vue b/packages/documentation/layouts/fullpage.vue
index 2f2d83405a..fe83529008 100644
--- a/packages/documentation/layouts/fullpage.vue
+++ b/packages/documentation/layouts/fullpage.vue
@@ -5,6 +5,7 @@
 			<div class="workspace">
 				<nuxt class="content" />
 			</div>
+			<MyToaster />
 		</div>
 	</KtI18nContext>
 </template>
@@ -12,6 +13,7 @@
 <script>
 import { KtI18nContext } from '@3yourmind/kotti-ui'
 
+import MyToaster from '~/components/MyToaster.vue'
 import NavBar from '~/components/NavBar.vue'
 
 /* eslint-disable perfectionist/sort-objects */
@@ -19,6 +21,7 @@ export default {
 	name: 'FullPageLayout',
 	components: {
 		KtI18nContext,
+		MyToaster,
 		NavBar,
 	},
 }
diff --git a/packages/documentation/package.json b/packages/documentation/package.json
index 546b8a9a88..2186cbea6d 100644
--- a/packages/documentation/package.json
+++ b/packages/documentation/package.json
@@ -10,6 +10,7 @@
 		"lodash": "4.x",
 		"marked": "^12.0.0",
 		"natural-sort": "^1.0.0",
+		"ts-dedent": "^2.2.0",
 		"vue-router": "3.x"
 	},
 	"description": "Kotti-ui Doc Pages",
diff --git a/packages/documentation/pages/examples/layouts.vue b/packages/documentation/pages/examples/layouts.vue
index d5c75e19e5..2193efb3b1 100644
--- a/packages/documentation/pages/examples/layouts.vue
+++ b/packages/documentation/pages/examples/layouts.vue
@@ -49,6 +49,7 @@ import { Kotti } from '@3yourmind/kotti-ui'
 import { Yoco } from '@3yourmind/yoco'
 
 import LayoutContainer from '~/components/LayoutContainer.vue'
+import { info } from '~/utilities/toaster'
 
 /* eslint-disable perfectionist/sort-objects */
 export default {
@@ -224,8 +225,7 @@ export default {
 	},
 	methods: {
 		handleMenuClick() {
-			// eslint-disable-next-line no-alert
-			window.alert('Link Clicked')
+			info({ text: 'Link Clicked' })
 		},
 		setIsNarrow(isNarrow) {
 			this.isNarrow = isNarrow
diff --git a/packages/documentation/pages/usage/components/banner.vue b/packages/documentation/pages/usage/components/banner.vue
index d82e80572e..5939cf056f 100644
--- a/packages/documentation/pages/usage/components/banner.vue
+++ b/packages/documentation/pages/usage/components/banner.vue
@@ -1,120 +1,168 @@
-<template lang="md">
-<ComponentInfo v-bind="{ component }" />
-
-Banners can be used as an alert at the top of the screen to display
-critical messages or expandable information. It should not include a
-dismiss icon, and should **only disappear** once the problem is **resolved**.
-
-## Structure
-
-![Banner Structure](~/assets/img/banner_alert.png)
-
-1. **Glyph icon:** Indicates the type of this banner.
-2. **Message:** Give a short description of this issue or summary of an important message.
-3. **Action:** A textual call to action button to resolve this issue.
-
-## Types
-
-### Collapsed Banner
-
-Only use this type of banner when this issue will cause a significant error.
-
-<div class="element-example">
-	<KtBanner message="Your material is not published yet" icon="announce" actionText="Publish" />
-</div>
-
-```html
-<KtBanner
-	message="Your material is not published yet"
-	icon="announce"
-	actionText="Publish"
-/>
-```
-
-### Expand Banner
-
-It shows the most import message inside the banner but hides other
-information. Use it when you want to create a clear, non-interrupting
-interface.
-
-<div class="element-example">
-	<KtBanner
-		message="Your material is not published yet"
-		icon="cloud"
-	>
-		<div>
-			<h2>Order #100002</h2>
-			<h3>Order information</h3>
-			....
-			....
-		</div>
-	</KtBanner>
-</div>
-
-```html
-<KtBanner message="Your material is not published yet" icon="cloud">
+<template>
 	<div>
-		<h2>Order #100002</h2>
-		<h3>Order information</h3>
-		.... ....
+		<ComponentInfo v-bind="{ component }" />
+
+		<!-- eslint-disable vue/no-useless-v-bind -->
+		<!-- prettier-ignore -->
+		<CodePreviewNew
+			:code='`
+				<div style="display: flex; gap: var(--unit-4); flex-direction: column;">
+					<KtBanner text="I present you this error" type="error" />
+					<KtBanner text="I present you this info" type="info" />
+					<KtBanner text="I present you this success" type="success" />
+					<KtBanner text="I present you this warning" type="warning" />
+				</div>
+			`'
+			language="vue-html"
+		>
+			<div style="display: flex; flex-direction: column; gap: var(--unit-4);">
+				<KtBanner text="I present you this error" type="error" />
+				<KtBanner text="I present you this info" type="info" />
+				<KtBanner text="I present you this success" type="success" />
+				<KtBanner text="I present you this warning" type="warning" />
+			</div>
+		</CodePreviewNew>
+
+		<h2>With Action</h2>
+
+		<!-- prettier-ignore -->
+		<CodePreviewNew
+			:code='`
+				<KtBanner
+					action="Action"
+					isCloseable
+					text="..."
+					:type="type"
+					@action="onAction"
+					@close="onClose"
+				/>
+			`'
+			language="vue-html"
+		>
+			<KtBanner
+				v-if="!closed"
+				action="Action"
+				isCloseable
+				text="You can close this banner. We do not know why you would do that but you can. You can close this banner. We do not know why you would do that but you can. You can close this banner. We do not know why you would do that but you can."
+				:type="type"
+				@action="onAction"
+				@close="onClose"
+			/>
+			<KtButton v-else label="May I please try again?" @click="onClose" />
+		</CodePreviewNew>
+
+		<h2>With Header</h2>
+
+		<!-- prettier-ignore -->
+		<CodePreviewNew
+			:code='`
+				<KtBanner
+					header="Important Announcement"
+					text="You can’t close this banner. We do not know why you would do that but you can’t."
+					type="success"
+				/>
+			`'
+			language="vue-html"
+		>
+			<KtBanner
+				header="Important Announcement"
+				text="You can’t close this banner. We do not know why you would do that but you can’t. You can’t close this banner. We do not know why you would do that but you can’t. You can’t close this banner. We do not know why you would do that but you can’t."
+				type="success"
+			/>
+		</CodePreviewNew>
+
+		<h2>Close</h2>
+
+		<!-- prettier-ignore -->
+		<CodePreviewNew
+			:code='`
+				<KtBanner
+					isCloseable
+					text="You can close this banner. We do not know why you would do that but you can."
+					@close="onClose"
+				/>
+			`'
+			language="vue-html"
+		>
+			<KtBanner
+				v-if="!closed"
+				isCloseable
+				text="You can close this banner. We do not know why you would do that but you can. You can close this banner. We do not know why you would do that but you can. You can close this banner. We do not know why you would do that but you can."
+				@close="onClose"
+			/>
+			<KtButton v-else label="May I please try again?" @click="onClose" />
+		</CodePreviewNew>
+
+		<h2>Custom Style</h2>
+
+		<!-- prettier-ignore -->
+		<CodePreviewNew
+			:code='`
+				<KtBanner
+					isCloseable
+					text="As everyone knows, stonks only go up."
+					:type="{
+						icon: Yoco.Icon.CHARTS,
+						backgroundColor: \x27var(--gray-10)\x27,
+						darkColor: \x27var(--gray-70)\x27,
+						lightColor: \x27var(--gray-20)\x27,
+					}"
+					@close="onClose"
+				/>
+			`'
+			language="vue-html"
+		>
+			<KtBanner
+				v-if="!closed"
+				isCloseable
+				text="As everyone knows, stonks only go up."
+				:type="{
+					icon: Yoco.Icon.CHARTS,
+					backgroundColor: 'var(--gray-10)',
+					darkColor: 'var(--gray-70)',
+					lightColor: 'var(--gray-20)'
+				}"
+				@close="onClose"
+			/>
+			<KtButton v-else label="May I please try again?" @click="onClose" />
+		</CodePreviewNew>
+		<!-- eslint-enable vue/no-useless-v-bind -->
 	</div>
-</KtBanner>
-```
-
-## Style
-
-### Background
-
-You can use `banner-gray` to change the banner's background color,
-this style is useful when you want add contrast to the page.
-
-<div class="element-example white">
-	<KtBanner
-		message="Your material is not published yet"
-		icon="announce"
-		actionText="Publish"
-		isGray
-	/>
-</div>
-
-```html
-<KtBanner
-	message="Your material is not published yet"
-	icon="announce"
-	actionText="Publish"
-	isGray
-/>
-```
-
-## Usage
-
-### Attributes
-
-| Attribute          | Description                                    | Type      | Accepted values     | Default      |
-| :----------------- | :--------------------------------------------- | :-------- | :------------------ | :----------- |
-| `message`          | message in banner                              | `String`  | —                   | —            |
-| `icon`             | icon name from `yoco`                          | `String`  | icon name in `yoco` | `"announce"` |
-| `isGray`           | gray background for high contrast              | `Boolean` | —                   | `false`      |
-| `actionText`       | text shows when banner is not expandable       | `String`  | —                   | —            |
-| `expandLabel`      | text shows when expandable banner is collapsed | `String`  | —                   | `View`       |
-| `expandCloseLabel` | text shows when expandable banner is expand    | `String`  | —                   | `Close`      |
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 
 import { KtBanner } from '@3yourmind/kotti-ui'
+import { Yoco } from '@3yourmind/yoco'
 
+import CodePreviewNew from '~/components/CodePreviewNew.vue'
 import ComponentInfo from '~/components/ComponentInfo.vue'
 
 export default defineComponent({
 	name: 'DocumentationPageUsageComponentsBanner',
 	components: {
+		CodePreviewNew,
 		ComponentInfo,
 	},
 	setup() {
+		const closed = ref(false)
+		const type = ref('success')
+
 		return {
+			closed,
 			component: KtBanner,
+			onAction: () => {
+				type.value = ['success', 'warning', 'error', 'info'][
+					// eslint-disable-next-line no-magic-numbers
+					Math.floor(Math.random() * 4)
+				] as string
+			},
+			onClose: () => {
+				closed.value = !closed.value
+			},
+			type,
+			Yoco,
 		}
 	},
 })
diff --git a/packages/documentation/pages/usage/components/button.vue b/packages/documentation/pages/usage/components/button.vue
index e10ddf9d03..5694494fd5 100644
--- a/packages/documentation/pages/usage/components/button.vue
+++ b/packages/documentation/pages/usage/components/button.vue
@@ -25,21 +25,33 @@
 		<h2>Types</h2>
 
 		<div class="element-example white">
-			<KtButton class="mt-4 mr-4" type="primary" @click="alert('primary')"
-				>Primary Button</KtButton
-			>
-			<KtButton class="mt-4 mr-4" type="secondary" @click="alert('secondary')"
-				>Secondary Button</KtButton
-			>
-			<KtButton class="mt-4 mr-4" type="danger" @click="alert('danger')"
-				>Danger Button</KtButton
+			<KtButton
+				class="mt-4 mr-4"
+				type="primary"
+				@click="info({ text: 'primary' })"
 			>
-			<KtButton class="mt-4 mr-4" @click="alert('default')"
-				>Default Button</KtButton
+				Primary Button
+			</KtButton>
+			<KtButton
+				class="mt-4 mr-4"
+				type="secondary"
+				@click="info({ text: 'secondary' })"
 			>
-			<KtButton class="mt-4 mr-4" type="text" @click="alert('text')"
-				>Text Button</KtButton
+				Secondary Button
+			</KtButton>
+			<KtButton
+				class="mt-4 mr-4"
+				type="danger"
+				@click="info({ text: 'danger' })"
 			>
+				Danger Button
+			</KtButton>
+			<KtButton class="mt-4 mr-4" @click="info({ text: 'default' })">
+				Default Button
+			</KtButton>
+			<KtButton class="mt-4 mr-4" type="text" @click="info({ text: 'text' })">
+				Text Button
+			</KtButton>
 		</div>
 
 		<h4>Primary button</h4>
@@ -292,47 +304,47 @@
 					{
 						icon: 'calendar',
 						label: 'Action 1',
-						onClick: () => alert('Action 1'),
+						onClick: () => info({ text: 'Action 1' }),
 						dataTest: 'action-1',
 					},
 					{
 						icon: 'landline',
 						label: 'Action 2',
-						onClick: () => alert('Action 2'),
+						onClick: () => info({ text: 'Action 2' }),
 						dataTest: 'action-2',
 					},
 					{
 						icon: 'location',
 						label: 'Action 3',
-						onClick: () => alert('Action 3'),
+						onClick: () => info({ text: 'Action 3' }),
 						dataTest: 'action-3',
 						isDisabled: true,
 					},
 				]"
 				class="mr-4"
-				@click="alert(splitButtonProps.label)"
+				@click="info({ text: splitButtonProps.label })"
 			/>
 			<KtSplitButton
 				v-bind="splitButtonProps"
 				:actions="[
 					{
 						label: 'Action 4',
-						onClick: () => alert('Action 4'),
+						onClick: () => info({ text: 'Action 4' }),
 						dataTest: 'action-4',
 					},
 					{
 						label: 'Action 5',
-						onClick: () => alert('Action 5'),
+						onClick: () => info({ text: 'Action 5' }),
 						dataTest: 'action-5',
 						isDisabled: true,
 					},
 					{
 						label: 'Action 6',
-						onClick: () => alert('Action 6'),
+						onClick: () => info({ text: 'Action 6' }),
 						dataTest: 'action-6',
 					},
 				]"
-				@click="alert(splitButtonProps.label)"
+				@click="info({ text: splitButtonProps.label })"
 			/>
 		</div>
 
@@ -411,15 +423,15 @@
 		<pre><code data-lang="html">
 &lt;KtSplitButton
     :actions=&quot;[
-        { icon: 'calendar', label: 'Action 1', onClick: () => alert('Action 1'), dataTest: 'calendar' },
-        { icon: 'landline', label: 'Action 2', onClick: () => alert('Action 2'), dataTest: 'landline' },
-        { icon: 'location', label: 'Action 3', onClick: () => alert('Action 3'), dataTest: 'location', isDisabled: true },
+        { icon: 'calendar', label: 'Action 1', onClick: () => info({text: 'Action 1'}), dataTest: 'calendar' },
+        { icon: 'landline', label: 'Action 2', onClick: () => info({text: 'Action 2'}), dataTest: 'landline' },
+        { icon: 'location', label: 'Action 3', onClick: () => info({text: 'Action 3'}), dataTest: 'location', isDisabled: true },
     ]&quot;
     dataTest=&quot;btn-1&quot;
     icon=&quot;download&quot;
     label=&quot;Split Button&quot;
     type=&quot;primary&quot;
-    @click=&quot;alert('Split Button')&quot;
+    @click=&quot;info({text: 'Split Button'})&quot;
 /&gt;
         </code></pre>
 
@@ -461,6 +473,7 @@ import { Kotti } from '@3yourmind/kotti-ui'
 import { Yoco } from '@3yourmind/yoco'
 
 import ComponentInfo from '~/components/ComponentInfo.vue'
+import { info } from '~/utilities/toaster'
 
 export default defineComponent({
 	name: 'DocumentationPageUsageComponentsButton',
@@ -500,14 +513,11 @@ export default defineComponent({
 		})
 
 		return {
-			alert: (value: string) => {
-				// eslint-disable-next-line no-alert
-				window.alert(value)
-			},
 			iconOptions: Object.values(Yoco.Icon).map((icon) => ({
 				label: icon,
 				value: icon,
 			})),
+			info,
 			ktButtonComponent: KtButton,
 			ktSplitButtonComponent: KtSplitButton,
 			onToggleDefaultClick: (status: Kotti.Button.ToggleStatus) => {
diff --git a/packages/documentation/pages/usage/components/field-inline-edit.vue b/packages/documentation/pages/usage/components/field-inline-edit.vue
index fd5332b89b..79b7b2ce92 100644
--- a/packages/documentation/pages/usage/components/field-inline-edit.vue
+++ b/packages/documentation/pages/usage/components/field-inline-edit.vue
@@ -106,6 +106,7 @@ import {
 } from '@3yourmind/kotti-ui'
 
 import ComponentInfo from '~/components/ComponentInfo.vue'
+import { success } from '~/utilities/toaster'
 
 export default defineComponent({
 	name: 'DocumentationPageUsageComponentsFieldInlineEdit',
@@ -200,8 +201,7 @@ export default defineComponent({
 				}),
 			})),
 			onConfirm: (newVal: Kotti.FieldInlineEdit.Events.Confirm) => {
-				// eslint-disable-next-line no-alert
-				window.alert(newVal)
+				success({ text: newVal ?? '' })
 			},
 			preventConfirmationOptions: ref(
 				Object.entries(Kotti.FieldInlineEdit.ConfirmationValidation).map(
diff --git a/packages/documentation/pages/usage/components/form-fields.vue b/packages/documentation/pages/usage/components/form-fields.vue
index 86a8bac4ba..111859062d 100644
--- a/packages/documentation/pages/usage/components/form-fields.vue
+++ b/packages/documentation/pages/usage/components/form-fields.vue
@@ -185,12 +185,12 @@
 						<div
 							v-if="componentDefinition.additionalProps.includes('emitEvents')"
 						>
-							<h4>Actions</h4>
+							<h4>Events</h4>
 							<KtFieldToggle
 								formKey="emitBlur"
 								helpText="Only works with KtFieldNumber for now"
 								isOptional
-								label="Blur"
+								label="Show blur event toasts (documentation-only)"
 								type="switch"
 							/>
 						</div>
@@ -765,6 +765,7 @@ import {
 import { Yoco } from '@3yourmind/yoco'
 
 import ComponentInfo from '~/components/ComponentInfo.vue'
+import { info } from '~/utilities/toaster'
 
 import { useRouter } from '../../../hooks/use-router'
 import {
@@ -1776,12 +1777,15 @@ export default defineComponent({
 				})),
 			isRangeComponent,
 			onBlur: (value: number) => {
-				// eslint-disable-next-line no-alert
-				if (settings.value.emitBlur) window.alert(`@blur: ${String(value)}`)
+				if (settings.value.emitBlur)
+					info({
+						text: `@blur: ${String(value)}`,
+					})
 			},
 			onSubmit: (values: Record<string, unknown>) => {
-				// eslint-disable-next-line no-alert
-				window.alert(`@submit: ${JSON.stringify(values, null, '\t')}`)
+				info({
+					text: `@submit: ${JSON.stringify(values, null, '\t')}`,
+				})
 			},
 			reset: () => {
 				values.value = INITIAL_VALUES
diff --git a/packages/documentation/pages/usage/components/form.vue b/packages/documentation/pages/usage/components/form.vue
index 361add542e..f56563d990 100644
--- a/packages/documentation/pages/usage/components/form.vue
+++ b/packages/documentation/pages/usage/components/form.vue
@@ -300,6 +300,7 @@ import {
 } from '@3yourmind/kotti-ui'
 
 import ComponentInfo from '~/components/ComponentInfo.vue'
+import { info } from '~/utilities/toaster'
 
 export default defineComponent({
 	name: 'DocumentationPageUsageComponentsForm',
@@ -344,8 +345,7 @@ export default defineComponent({
 			onSubmit: (event: Kotti.Form.Events.Submit) => {
 				// eslint-disable-next-line no-console
 				console.debug('onSubmit', event)
-				// eslint-disable-next-line no-alert
-				window.alert('onSubmit: See Console for Event Details')
+				info({ text: 'onSubmit: See Console for Event Details' })
 			},
 			settings: ref({
 				booleanFlags: {
diff --git a/packages/documentation/pages/usage/components/heading.vue b/packages/documentation/pages/usage/components/heading.vue
index 0026f42ade..3be84fcff8 100644
--- a/packages/documentation/pages/usage/components/heading.vue
+++ b/packages/documentation/pages/usage/components/heading.vue
@@ -90,6 +90,7 @@ import { defineComponent, ref } from 'vue'
 import { KtHeading } from '@3yourmind/kotti-ui'
 
 import ComponentInfo from '~/components/ComponentInfo.vue'
+import { info } from '~/utilities/toaster'
 
 export default defineComponent({
 	name: 'DocumentationPageUsageComponentsHeadings',
@@ -101,8 +102,7 @@ export default defineComponent({
 			component: KtHeading,
 			toggle: ref(false),
 			showAlert() {
-				// eslint-disable-next-line no-alert
-				window.alert('H3 Action Clicked')
+				info({ text: 'H3 Action Clicked' })
 			},
 		}
 	},
diff --git a/packages/documentation/pages/usage/components/line.vue b/packages/documentation/pages/usage/components/line.vue
index 475688a4a2..9b918d4e84 100644
--- a/packages/documentation/pages/usage/components/line.vue
+++ b/packages/documentation/pages/usage/components/line.vue
@@ -44,19 +44,19 @@
     	<KtLine
     		isInteractive
     		text="Action Center"
-    		@click="alert('clicked center title')"
+    		@click="handleClick('clicked center title')"
     	/>
     	<KtLine
     		isInteractive
     		position="left"
     		text="Action Left"
-    		@click="alert('clicked left title')"
+    		@click="handleClick('clicked left title')"
     	/>
     	<KtLine
     		isInteractive
     		position="right"
     		text="Action Right"
-    		@click="alert('clicked right title')"
+    		@click="handleClick('clicked right title')"
     	/>
     ```
 </template>
@@ -67,6 +67,7 @@ import { defineComponent } from 'vue'
 import { KtLine } from '@3yourmind/kotti-ui'
 
 import ComponentInfo from '~/components/ComponentInfo.vue'
+import { info } from '~/utilities/toaster'
 
 export default defineComponent({
 	name: 'DocumentationPageUsageComponentsLine',
@@ -77,8 +78,7 @@ export default defineComponent({
 		return {
 			component: KtLine,
 			handleClick: (text: string) => {
-				// eslint-disable-next-line no-alert
-				window.alert(text)
+				info({ text })
 			},
 		}
 	},
diff --git a/packages/documentation/pages/usage/components/popover.vue b/packages/documentation/pages/usage/components/popover.vue
index b43dd8fec2..5daa4e91d8 100644
--- a/packages/documentation/pages/usage/components/popover.vue
+++ b/packages/documentation/pages/usage/components/popover.vue
@@ -201,6 +201,7 @@ import {
 import { Yoco } from '@3yourmind/yoco'
 
 import ComponentInfo from '~/components/ComponentInfo.vue'
+import { info } from '~/utilities/toaster'
 
 enum UsageMode {
 	OPTIONS = 'OPTIONS',
@@ -233,8 +234,7 @@ export default defineComponent({
 				isSelected: false,
 				label: 'User',
 				onClick: () => {
-					// eslint-disable-next-line no-alert
-					window.alert('clicked')
+					info({ text: 'clicked' })
 				},
 			},
 			/**
diff --git a/packages/documentation/pages/usage/components/table-legacy.vue b/packages/documentation/pages/usage/components/table-legacy.vue
index e710b9273a..8f0da4b079 100644
--- a/packages/documentation/pages/usage/components/table-legacy.vue
+++ b/packages/documentation/pages/usage/components/table-legacy.vue
@@ -275,7 +275,7 @@ _Note:_ Neither events get triggered on a _disabled_ row.
 ```js
 methods: {
 	showAlertOnClickOrEnter(row, rowIndex) {
-		alert(`${JSON.stringify(value)} is at index: ${model}!`)
+		info({text: `${JSON.stringify(value)} is at index: ${model}!`})
 	}
 }
 ```
@@ -649,7 +649,7 @@ It is possible to customize parts (columns) of the table by passing your own ren
 			)
 		},
 		showAlert(model, value) {
-			alert(`${model} is ${value}!`)
+			info({text: `${model} is ${value}!`)
 		},
 		renderActions(h, { row }) {
 			const onEditClick = () => this.showAlert(row.name, 'edited')
@@ -1114,6 +1114,7 @@ import { Kotti } from '@3yourmind/kotti-ui'
 
 import CodePreview from '~/components/CodePreview.vue'
 import ComponentInfo from '~/components/ComponentInfo.vue'
+import { info } from '~/utilities/toaster'
 
 const ADDRESS_DOT_LINE = 'address.line'
 
@@ -1236,12 +1237,10 @@ export default {
 			this.selected = [...rows]
 		},
 		showAlertOnClickOrEnter(row, rowIndex) {
-			// eslint-disable-next-line no-alert
-			window.alert(`${JSON.stringify(row)} is at index: ${String(rowIndex)}!`)
+			info({ text: `${JSON.stringify(row)} is at index: ${String(rowIndex)}!` })
 		},
 		showAlert(model, value) {
-			// eslint-disable-next-line no-alert, @typescript-eslint/restrict-template-expressions
-			window.alert(`${model} is ${value}!`)
+			info({ text: `${String(model)} is ${String(value)}!` })
 		},
 		sortDate(a, b) {
 			return new Date(a) - new Date(b)
diff --git a/packages/documentation/pages/usage/components/toaster.vue b/packages/documentation/pages/usage/components/toaster.vue
index 8ba36264e8..c644e81eb0 100644
--- a/packages/documentation/pages/usage/components/toaster.vue
+++ b/packages/documentation/pages/usage/components/toaster.vue
@@ -1,88 +1,433 @@
-<template lang="md">
-<ComponentInfo v-bind="{ component }" />
+<template>
+	<div>
+		<ComponentInfo :component="KtToaster" />
 
-A toaster is a small message shown in the upper right corner of the screen, which disappears after few seconds.
+		<!-- prettier-ignore -->
+		<CodePreviewNew
+			:code='`
+				<${parserHack.script} lang="ts">
+				import { createToaster, KtButton, KtToast, KtToaster } from \x27@3yourmind/kotti-ui\x27
 
-Toasters can deliver messages that the user needs to pay attention to without interrupting their current workflow. Using banners is a better solution, when the message is important and shouldn't automatically disappear without the user taking action.
+				const toaster = createToaster<{
+					default: Record<string, never>
+					\x27my-error-toast\x27: Record<string, never>
+					\x27my-info-toast\x27: Record<string, never>
+					\x27my-link-toast\x27: {
+						href: string,
+						label: string,
+					},
+					\x27my-minimalistic-toast\x27: Record<string, never>
+					\x27my-success-toast\x27: Record<string, never>,
+					\x27my-warning-toast\x27: Record<string, never>
+				}>()
 
-## Structure
+				const show = toaster.withOptions({ duration: 5000 })
 
-![Toaster Structure](~/assets/img/toaster_structure.png)
+				export default defineComponent({
+					name: \x27Example\x27,
+					components: {
+						KtButton,
+						KtToast,
+						KtToaster,
+					},
+					setup () {
+						// you can also try this in your browser console
+						globalThis.toaster = toaster
 
-1. Type Color: Depends on the type of toaster. There are three colors:
+						return {
+							defaultToast: () => {
+								show({
+									header: \x27default header\x27,
+									text: \x27default toast\x27,
+								})
+							},
+							errorToast: () => {
+								show({
+									text: \x27I am an error toast\x27,
+									type: \x27my-error-toast\x27,
+								})
+							},
+							infoToast: () => {
+								show({
+									text: \x27I am an info toast\x27,
+									type: \x27my-info-toast\x27,
+								})
+							},
+							linkToast: () => {
+								show({
+									custom: {
+										href: \x27https://github.com/3YOURMIND/kotti\x27,
+										label: \x27See documentation\x27,
+									},
+									text: \x27link toast\x27,
+									type: \x27my-link-toast\x27,
+								})
+							},
+							minimalisticToast: () => {
+								show({
+									text: \x27minimalistic toast\x27,
+									type: \x27my-minimalistic-toast\x27,
+								})
+							},
+							permanentToast: () => {
+								show({
+									duration: null,
+									text: \x27This is a one-line toast message. This is a one-line toast message. This is a one-line toast message.\x27,
+								})
+							},
+							successToast: () => {
+								show({
+									text: \x27success toast\x27,
+									type: \x27my-success-toast\x27,
+								})
+							},
+							warningToast: () => {
+								show({
+									text: \x27I am a warning toast\x27,
+									type: \x27my-warning-toast\x27,
+								})
+							},
+						}
+					}
+				})
+				</${parserHack.script}>
 
-   - `Green-500`: for success information
-   - `Orange-500`: for warning message
-   - `Red-500`: for fail/alert message
+				<${parserHack.template}>
+					<KtToaster :toaster=\x27toaster\x27>
+						<${parserHack.template} #my-minimalistic-toast>
+							<KtToast
+								:type=\x27{
+									icon: null,
+									backgroundColor: \x27black\x27,
+									darkColor: \x27black\x27,
+									lightColor: \x27var(--gray-70)\x27
+								}\x27
+							/>
+						</${parserHack.template}>
+						<${parserHack.template} #my-link-toast=\x27{ custom, text }\x27>
+							<KtToast>
+								<${parserHack.template} #text>
+									<span v-text=\x27text\x27 />
+									<a :href=\x27custom.href\x27>{{ custom.label }}</a>
+								</${parserHack.template}>
+							</KtToast>
+						</${parserHack.template}>
+						<${parserHack.template} #my-error-toast>
+							<KtToast type=\x27error\x27 />
+						</${parserHack.template}>
+						<${parserHack.template} #my-info-toast>
+							<KtToast type=\x27info\x27 />
+						</${parserHack.template}>
+						<${parserHack.template} #my-success-toast>
+							<KtToast type=\x27success\x27 />
+						</${parserHack.template}>
+						<${parserHack.template} #my-warning-toast>
+							<KtToast type=\x27warning\x27 />
+						</${parserHack.template}>
+					</KtToaster>
 
-2. Message: Keep the message short and easy to understand, since the toaster disappears automatically after a few seconds.
+					<div style=\x27display: flex; flex-wrap: wrap; gap: var(--unit-6);\x27>
+						<KtButton @click=\x27defaultToast\x27>default toast</KtButton>
+						<KtButton @click=\x27errorToast\x27>error toast</KtButton>
+						<KtButton @click=\x27infoToast\x27>info toast</KtButton>
+						<KtButton @click=\x27successToast\x27>success toast</KtButton>
+						<KtButton @click=\x27warningToast\x27>warning toast</KtButton>
+						<KtButton @click=\x27permanentToast\x27>permanent toast</KtButton>
+						<KtButton @click=\x27minimalisticToast\x27>minimalistic toast</KtButton>
+						<KtButton @click=\x27linkToast\x27>link toast</KtButton>
+					</div>
+				</${parserHack.template}>
+			`'
+			fileName="Example.vue"
+			language="vue"
+		>
+			<KtToaster :toaster="toaster">
+				<template #my-minimalistic-toast>
+					<KtToast
+						:type="{
+							icon: null,
+							backgroundColor: 'black',
+							darkColor: 'black',
+							lightColor: 'var(--gray-70)'
+						}"
+					/>
+				</template>
+				<template #my-link-toast="{ custom, text }">
+					<KtToast>
+						<template #text>
+							<span v-text="text" />
+							<a :href="custom.href">{{ custom.label }}</a>
+						</template>
+					</KtToast>
+				</template>
+				<template #my-error-toast>
+					<KtToast type="error" />
+				</template>
+				<template #my-info-toast>
+					<KtToast type="info" />
+				</template>
+				<template #my-success-toast>
+					<KtToast type="success" />
+				</template>
+				<template #my-warning-toast>
+					<KtToast type="warning" />
+				</template>
+			</KtToaster>
 
-3. Close Button: Allows the user to dismiss this message.
+			<div style="display: flex; flex-wrap: wrap; gap: var(--unit-6);">
+				<KtButton @click="defaultToast">default toast</KtButton>
+				<KtButton @click="errorToast">error toast</KtButton>
+				<KtButton @click="infoToast">info toast</KtButton>
+				<KtButton @click="successToast">success toast</KtButton>
+				<KtButton @click="warningToast">warning toast</KtButton>
+				<KtButton @click="permanentToast">permanent toast</KtButton>
+				<KtButton @click="minimalisticToast">minimalistic toast</KtButton>
+				<KtButton @click="linkToast">link toast</KtButton>
+			</div>
+		</CodePreviewNew>
 
-## Usage
+		<h2>Usage</h2>
 
-Since `Kotti-UI 1.0.0`, [vue-yodify](https://github.com/3YOURMIND/vue-yodify) is merged into Kotti-UI as `KtToaster`.
+		<CodePreviewNew
+			code='
+				import { success, toaster } from "~/shared/toaster.ts"
 
-<div class="element-example">
-	<KtToaster/>
-	<KtButton
-		@click="$yodify({ text: 'Wow very looooooooooooong text, and it breaks the line!', type: 'success' })"
-		v-text="'Success Long Message'"
-	/>
-	<KtButton
-		@click="$yodify({ text: 'Error message', type: 'error' })"
-		v-text="'Error Message'"
-	/>
-	<KtButton
-		@click="$yodify({ text: 'Warning message', type: 'warning' })"
-		v-text="'Warning Message'"
-	/>
-</div>
+				export const someAction = async () => {
+					// show a toast without waiting for it
+					success({ text: "success" })
 
-You should include `KtToaster` as global component in your Vue application.
+					// wait for toast to be done showing, or to error when aborted
+					await success({ text: "will wait for this toast" }).done
 
-```html
-<!-- for example in app.vue -->
-<div id="app">
-	<KtToaster />
-	<router-view />
-</div>
-```
+					// abort the toast early
+					const toBeAborted = success({ text: "will be aborted" })
+					toBeAborted.abort()
 
-After registering the component you can call it globally by using the Vue instance in the script part of a component.
+					// programmatically push any kind of notification
+					toaster.show({ text: "anything", type: "error" })
 
-```js
-this.$yodify({
-	text: 'This was successful :)',
-	type: 'success', // optional, default
-	duration: 3000, // optional, default
-})
-```
+					// create some custom show handlers with default options
+					const customizedShow = toaster.withOptions({ type: "success" })
+					const message = customizedShow({ text: "my message" })
+					await message.done
+				}
+			'
+			fileName="~/store/my-module.ts"
+			language="typescript"
+		/>
+
+		<!-- prettier-ignore -->
+		<CodePreviewNew
+			:code='`
+				<${parserHack.script} lang="ts">
+				import { defineComponent } from "vue"
+
+				import { success } from "~/shared/toaster.ts"
+
+				export default defineComponent({
+					setup() {
+						return {
+							onClick: async () => {
+								await success({
+									text: "something went well",
+								})
+							}
+						}
+					}
+				})
+				</${parserHack.script}>
+
+				<${parserHack.template}>
+					<KtButton label="Show Toast" @click="onClick">
+				</${parserHack.template}>
+			`'
+			fileName="~/components/MyComponent.vue"
+			language="vue"
+		/>
+
+		<h2>Initial Setup</h2>
+
+		This is the per-app setup process for <code>KtToaster</code>
+
+		<!-- prettier-ignore -->
+		<CodePreviewNew
+			:code='`
+				<${parserHack.template}>
+					<KtToaster :toaster="toaster" />
+				</${parserHack.template}>
+
+				<${parserHack.script} lang="ts">
+				import { defineComponent } from "vue"
 
-### Attributes
+				import { toaster } from "~/shared/toaster.ts"
 
-| Attribute  | Description                                 | Type     | Accepted values               | Default   |
-| :--------- | :------------------------------------------ | :------- | :---------------------------- | :-------- |
-| `duration` | duration after which the toaster disappears | `Number` | —                             | `3000`    |
-| `text`     | text message in the toaster                 | `String` | —                             | —         |
-| `type`     | define the type of the toaster              | `String` | `success`, `error`, `warning` | `success` |
+				export default defineComponent({
+					setup() {
+						return {
+							// KtToaster needs a reference to your per-app toaster instance
+							toaster
+						}
+					}
+				})
+				</${parserHack.script}>
+			`'
+			fileName="App.vue"
+			language="vue"
+		/>
+
+		<CodePreviewNew
+			code='
+				import { createToaster } from "@3yourmind/kotti-ui"
+
+				// create a toaster instance, usually there should only ever be one per app
+				export const toaster = createToaster<{
+					default: Record<string, never>
+					error: Record<string, never>
+					success: Record<string, never>
+				}>()
+
+				// show a maximum number of toasts simultaneously, defaults to 3
+				// export const toaster = createToaster({ numberOfToasts: 6 })
+
+				// define custom notification presets with pre-configured options
+				export const error = toaster.withOptions({ duration: 5_000, type: "error" })
+				export const success = toaster.withOptions({ duration: 5_000, type: "success" })
+				export const successPersistent = toaster.withOptions({ type: "success" })
+			'
+			fileName="~/shared/toaster.ts"
+			language="typescript"
+		/>
+
+		<ComponentInfo :component="KtToast" />
+
+		<nuxt-link to="/usage/components/banner">
+			See <code>KtBanner</code>
+		</nuxt-link>
+
+		<!-- eslint-disable vue/no-useless-v-bind -->
+		<!-- prettier-ignore -->
+		<CodePreviewNew
+			:code="`
+				<KtToast type='error' />
+				<KtToast type='info' />
+				<KtToast type='success' />
+				<KtToast type='warning' />
+				<KtToast
+					:type=\x22{
+						icon: null,
+						backgroundColor: 'var(--gray-10)',
+						darkColor: 'var(--gray-70)',
+						lightColor: 'var(--gray-20)'
+					}\x22
+				/>
+			`"
+			language="vue-html"
+		/>
+		<!-- eslint-enable vue/no-useless-v-bind -->
+	</div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
 
-import { KtToaster } from '@3yourmind/kotti-ui'
+import {
+	createToaster,
+	KtButton,
+	KtToast,
+	KtToaster,
+} from '@3yourmind/kotti-ui'
 
+import CodePreviewNew from '~/components/CodePreviewNew.vue'
 import ComponentInfo from '~/components/ComponentInfo.vue'
 
+const toaster = createToaster<{
+	default: Record<string, never>
+	'my-error-toast': Record<string, never>
+	'my-info-toast': Record<string, never>
+	'my-link-toast': {
+		href: string
+		label: string
+	}
+	'my-minimalistic-toast': Record<string, never>
+	'my-success-toast': Record<string, never>
+	'my-warning-toast': Record<string, never>
+}>()
+const show = toaster.withOptions({ duration: 5000 })
+
 export default defineComponent({
-	name: 'KtToasterDoc',
+	name: 'DocumentationPageUsageComponentsToaster',
 	components: {
+		CodePreviewNew,
 		ComponentInfo,
+		KtButton,
+		KtToast,
+		KtToaster,
 	},
 	setup() {
+		// @ts-expect-error you can also try this in your browser console
+		globalThis.toaster = toaster
+
 		return {
-			component: KtToaster,
+			defaultToast: () => {
+				show({
+					header: 'default header',
+					text: 'default toast',
+				})
+			},
+			errorToast: () => {
+				show({
+					text: 'I am an error toast',
+					type: 'my-error-toast',
+				})
+			},
+			infoToast: () => {
+				show({
+					text: 'I am an info toast',
+					type: 'my-info-toast',
+				})
+			},
+			KtToast,
+			KtToaster,
+			linkToast: () => {
+				show({
+					custom: {
+						href: 'https://github.com/3YOURMIND/kotti',
+						label: 'See documentation',
+					},
+					text: 'link toast',
+					type: 'my-link-toast',
+				})
+			},
+			minimalisticToast: () => {
+				show({
+					text: 'minimalistic toast',
+					type: 'my-minimalistic-toast',
+				})
+			},
+			parserHack: {
+				// HACK: parsers are angry when you say template
+				script: 'script',
+				template: 'template',
+			},
+			permanentToast: () => {
+				show({
+					duration: null,
+					text: 'This is a one-line toast message. This is a one-line toast message. This is a one-line toast message.',
+				})
+			},
+			successToast: () => {
+				show({
+					text: 'I am a success toast',
+					type: 'my-success-toast',
+				})
+			},
+			toaster,
+			warningToast: () => {
+				show({
+					text: 'I am a warning toast',
+					type: 'my-warning-toast',
+				})
+			},
 		}
 	},
 })
diff --git a/packages/documentation/styles/main.scss b/packages/documentation/styles/main.scss
index 42df22753d..4fc0a68bc5 100644
--- a/packages/documentation/styles/main.scss
+++ b/packages/documentation/styles/main.scss
@@ -21,16 +21,6 @@ pre.long {
 	user-select: all;
 }
 
-.success-message {
-	position: fixed;
-	right: 1rem;
-	bottom: 1rem;
-	padding: 0.8rem 1.2rem;
-	color: #fff;
-	background: #2c66c4;
-	border-radius: 0.1rem;
-}
-
 .element-example {
 	position: relative;
 	display: block;
diff --git a/packages/documentation/utilities/pages.ts b/packages/documentation/utilities/pages.ts
index 7397e0868a..ed6b48f67e 100644
--- a/packages/documentation/utilities/pages.ts
+++ b/packages/documentation/utilities/pages.ts
@@ -1,5 +1,7 @@
 import { Kotti } from '@3yourmind/kotti-ui'
 
+import { info } from '~/utilities/toaster'
+
 export type ComponentNames =
 	| 'KtFieldDate'
 	| 'KtFieldDateRange'
@@ -69,15 +71,13 @@ export const createActions = (
 				{
 					label: 'Create Item',
 					onClick: () => {
-						// eslint-disable-next-line no-alert
-						window.alert('actions[0].onClick called')
+						info({ text: 'actions[0].onClick called' })
 					},
 				},
 				{
 					label: 'Edit Item',
 					onClick: () => {
-						// eslint-disable-next-line no-alert
-						window.alert('actions[1].onClick called')
+						info({ text: 'actions[1].onClick called' })
 					},
 				},
 			]
diff --git a/packages/documentation/utilities/toaster.ts b/packages/documentation/utilities/toaster.ts
new file mode 100644
index 0000000000..23df4079db
--- /dev/null
+++ b/packages/documentation/utilities/toaster.ts
@@ -0,0 +1,53 @@
+import { createToaster } from '@3yourmind/kotti-ui'
+
+export const toaster = createToaster<{
+	default: Record<string, never>
+	error: Record<string, never>
+	info: Record<string, never>
+	success: Record<string, never>
+	warning: Record<string, never>
+}>()
+
+/**
+ * HACK: Types don't get correctly inferred in vue2/nuxt2 version of the documentation
+ * This should be removed in vue3
+ */
+type ToasterAPIHack = (params: {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	custom?: any
+	duration?: number
+	header?: string
+	text: string
+}) => Record<string, unknown>
+
+/**
+ * @knipignore
+ */
+export const error = toaster.withOptions({
+	duration: 5_000,
+	type: 'error',
+}) as unknown as ToasterAPIHack
+
+/**
+ * @knipignore
+ */
+export const info = toaster.withOptions({
+	duration: 5_000,
+	type: 'info',
+}) as unknown as ToasterAPIHack
+
+/**
+ * @knipignore
+ */
+export const success = toaster.withOptions({
+	duration: 5_000,
+	type: 'success',
+}) as unknown as ToasterAPIHack
+
+/**
+ * @knipignore
+ */
+export const warning = toaster.withOptions({
+	duration: 5_000,
+	type: 'warning',
+}) as unknown as ToasterAPIHack
diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json
index e77e38607b..c44281252f 100644
--- a/packages/eslint-config/package.json
+++ b/packages/eslint-config/package.json
@@ -64,5 +64,5 @@
 	},
 	"type": "module",
 	"types": "./dist/mjs/index.d.ts",
-	"version": "0.1.2"
+	"version": "0.1.3"
 }
diff --git a/packages/eslint-config/source/index.ts b/packages/eslint-config/source/index.ts
index 320f994c17..853b238a84 100644
--- a/packages/eslint-config/source/index.ts
+++ b/packages/eslint-config/source/index.ts
@@ -528,6 +528,8 @@ export default {
 				'@typescript-eslint/no-empty-function': 'off',
 				'@typescript-eslint/no-empty-interface': 'off',
 				'@typescript-eslint/no-explicit-any': 'off',
+				'@typescript-eslint/no-non-null-assertion': 'off',
+				'@typescript-eslint/no-unnecessary-condition': 'off',
 				'@typescript-eslint/no-unsafe-assignment': 'off',
 				'@typescript-eslint/no-unsafe-call': 'off',
 				'@typescript-eslint/no-unsafe-member-access': 'off',
diff --git a/packages/eslint-config/source/utils/no-restricted-globals.ts b/packages/eslint-config/source/utils/no-restricted-globals.ts
index 97e54bb02e..21fd96a300 100644
--- a/packages/eslint-config/source/utils/no-restricted-globals.ts
+++ b/packages/eslint-config/source/utils/no-restricted-globals.ts
@@ -27,6 +27,7 @@ const GLOBALS_WHITELIST = new Set([
 	'FileReader', // complicated due to typescript types
 	'FormData',
 	'Function',
+	'globalThis',
 	'Intl',
 	'JSON',
 	'Map',
diff --git a/packages/kotti-ui/package.json b/packages/kotti-ui/package.json
index a28b4b60ae..38e53486a1 100644
--- a/packages/kotti-ui/package.json
+++ b/packages/kotti-ui/package.json
@@ -7,7 +7,6 @@
 		"@3yourmind/vue-use-tippy": "3.x",
 		"@3yourmind/yoco": "^2.7.0",
 		"@metatypes/typography": "^0.5.0",
-		"@metatypes/units": "^0.5.0",
 		"big.js": "^6.2.1",
 		"core-js": "3.6.5",
 		"dayjs": "1.x",
@@ -15,6 +14,7 @@
 		"element-ui": "2.13.1",
 		"filesize": "^10.1.0",
 		"lodash": "4.x",
+		"nanoid": "3.x",
 		"normalize.css": "^8.0.1",
 		"shortid": "^2.2.15",
 		"tippy.js": "6.x",
diff --git a/packages/kotti-ui/source/index.ts b/packages/kotti-ui/source/index.ts
index d097100df0..f93f1766b8 100644
--- a/packages/kotti-ui/source/index.ts
+++ b/packages/kotti-ui/source/index.ts
@@ -100,7 +100,7 @@ import {
 export * from './kotti-table-legacy'
 import { KtTag } from './kotti-tag'
 export * from './kotti-tag'
-import { KtToaster } from './kotti-toaster'
+import { KtToast, KtToaster } from './kotti-toaster'
 export * from './kotti-toaster'
 import { KtUserMenu } from './kotti-user-menu'
 export * from './kotti-user-menu'
@@ -168,6 +168,7 @@ export default {
 			KtTableLegacyConsumer,
 			KtTableLegacyProvider,
 			KtTag,
+			KtToast,
 			KtToaster,
 			KtUserMenu,
 			KtValueLabel,
@@ -175,24 +176,5 @@ export default {
 		for (const component of components) {
 			Vue.use(component)
 		}
-
-		const DEFAULT_YODIFY_DURATION = 3000
-
-		Vue.prototype.$yodifyBuffer = []
-		Vue.prototype.$yodify = function ({
-			duration = DEFAULT_YODIFY_DURATION,
-			text,
-			type = 'success',
-		}: {
-			duration: number
-			text: string
-			type: 'error' | 'success'
-		}) {
-			const notification = { duration, text, type }
-
-			// buffer notifications if vue isn't ready
-			if (!this.$root) Vue.prototype.$yodifyBuffer.push(notification)
-			else this.$root.$emit('vue-yodify', notification)
-		}
 	},
 }
diff --git a/packages/kotti-ui/source/kotti-banner/KtBanner.vue b/packages/kotti-ui/source/kotti-banner/KtBanner.vue
index 1827cbe8cd..7d1f1e588a 100644
--- a/packages/kotti-ui/source/kotti-banner/KtBanner.vue
+++ b/packages/kotti-ui/source/kotti-banner/KtBanner.vue
@@ -1,29 +1,9 @@
-<template>
-	<div :class="bannerClass">
-		<div class="kt-banner__collapse">
-			<i class="yoco" v-text="icon" />
-			<div class="kt-banner__message" v-text="message" />
-			<div v-if="!expandable" @click="() => $emit('click')">
-				<KtButton v-if="actionText !== null" :label="actionText" type="text" />
-			</div>
-			<div v-else @click="isExpanded = !isExpanded">
-				<KtButton v-if="!isExpanded" :label="switchOpenLabel" type="text" />
-				<KtButton v-else :label="switchCloseLabel" type="text" />
-			</div>
-		</div>
-		<div v-if="isExpanded" class="kt-banner__expand">
-			<slot />
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue'
+import { computed, defineComponent } from 'vue'
 
 import { Yoco } from '@3yourmind/yoco'
 
 import { KtButton } from '../kotti-button'
-import { useTranslationNamespace } from '../kotti-i18n/hooks'
 import { makeProps } from '../make-props'
 
 import { KottiBanner } from './types'
@@ -34,62 +14,183 @@ export default defineComponent({
 		KtButton,
 	},
 	props: makeProps(KottiBanner.propsSchema),
-	emits: ['click'],
-	setup(props, { slots }) {
-		const translations = useTranslationNamespace('KtBanner')
+	emits: ['action', 'close'],
+	setup(props, { emit, slots }) {
+		const styles = computed((): KottiBanner.Style => {
+			switch (props.type) {
+				case 'error':
+					return {
+						backgroundColor: 'var(--banner-error-bg)',
+						darkColor: 'var(--banner-error-dark)',
+						icon: Yoco.Icon.CIRCLE_CROSS,
+						lightColor: 'var(--banner-error-light)',
+					}
+
+				case 'info':
+					return {
+						backgroundColor: 'var(--banner-info-bg)',
+						darkColor: 'var(--banner-info-dark)',
+						icon: Yoco.Icon.CIRCLE_I,
+						lightColor: 'var(--banner-info-light)',
+					}
+
+				case 'success':
+					return {
+						backgroundColor: 'var(--banner-success-bg)',
+						darkColor: 'var(--banner-success-dark)',
+						icon: Yoco.Icon.CIRCLE_CHECK,
+						lightColor: 'var(--banner-success-light)',
+					}
+
+				case 'warning':
+					return {
+						backgroundColor: 'var(--banner-warning-bg)',
+						darkColor: 'var(--banner-warning-dark)',
+						icon: Yoco.Icon.CIRCLE_ATTENTION,
+						lightColor: 'var(--banner-warning-light)',
+					}
+
+				default:
+					return props.type
+			}
+		})
 
 		return {
-			bannerClass: computed(() => ({
-				'kt-banner': true,
-				'kt-banner--is-gray': props.isGray,
-			})),
-			expandable: computed(() => Boolean(slots.default)),
-			isExpanded: ref(false),
-			switchCloseLabel: computed(
-				() => props.expandCloseLabel ?? translations.value.expandCloseLabel,
-			),
-			switchOpenLabel: computed(
-				() => props.expandLabel ?? translations.value.expandLabel,
+			hasActionSlot: computed((): boolean => Boolean(slots.action)),
+			hasFooter: computed((): boolean => Boolean(slots.footer)),
+			hasHeader: computed(
+				(): boolean => props.header !== null || Boolean(slots.header),
 			),
-			Yoco,
+			onAction: (event: MouseEvent) => {
+				emit('action', event)
+			},
+			onClose: (event: MouseEvent) => {
+				emit('close', event)
+			},
+			styles,
 		}
 	},
 })
 </script>
 
+<template>
+	<div class="kt-banner" :style="{ borderColor: styles.lightColor }">
+		<div
+			v-if="styles.icon !== null"
+			class="kt-banner__icon"
+			:style="{
+				color: styles.darkColor,
+				backgroundColor: styles.backgroundColor,
+			}"
+		>
+			<i class="yoco" v-text="styles.icon" />
+		</div>
+		<div class="kt-banner__text" :class="{ 'ml-1': styles.icon === null }">
+			<div v-if="hasHeader" class="kt-banner__header">
+				<slot name="header">
+					{{ header }}
+				</slot>
+			</div>
+			<div>
+				<slot name="text">
+					{{ text }}
+				</slot>
+			</div>
+			<div v-if="hasFooter">
+				<slot name="footer" />
+			</div>
+		</div>
+		<div v-if="hasActionSlot" class="kt-banner__action">
+			<slot name="action" />
+		</div>
+		<div v-else-if="action" class="kt-banner__action">
+			<KtButton :label="action" type="text" @click="onAction" />
+		</div>
+		<div v-if="isCloseable" class="kt-banner__close" @click="onClose">
+			<i class="yoco">close</i>
+		</div>
+	</div>
+</template>
+
+<style>
+:root {
+	--banner-error-bg: var(--support-error-bg);
+	--banner-error-light: var(--support-error-light);
+	--banner-error-dark: var(--support-error-dark);
+	--banner-info-bg: var(--support-info-bg);
+	--banner-info-light: var(--support-info-light);
+	--banner-info-dark: var(--support-info-dark);
+	--banner-warning-bg: var(--support-warning-bg);
+	--banner-warning-light: var(--support-warning-light);
+	--banner-warning-dark: var(--support-warning-dark);
+	--banner-success-bg: var(--support-success-bg);
+	--banner-success-light: var(--support-success-light);
+	--banner-success-dark: var(--support-success-dark);
+}
+</style>
+
 <style lang="scss" scoped>
 .kt-banner {
 	display: flex;
-	flex-direction: column;
-	padding: var(--unit-2) var(--unit-4);
-	background: var(--white);
-	border: 1px solid var(--gray-20);
-	border-radius: var(--border-radius);
-
-	&--is-gray {
-		background: var(--gray-20);
-	}
+	gap: var(--unit-2);
+	padding: var(--unit-1);
+	user-select: none;
+	background-color: var(--ui-background);
+	border: 1px solid transparent;
+	border-radius: var(--unit-2);
 
-	&__collapse {
+	&__icon,
+	&__close,
+	&__action {
 		display: flex;
-		flex-direction: row;
 		align-items: center;
-		width: 100%;
+		justify-content: center;
+	}
+
+	&__icon,
+	&__close {
+		width: var(--unit-7);
+		height: var(--unit-7);
+
+		.yoco {
+			font-size: var(--unit-5);
+		}
+	}
+
+	&__close,
+	&__action {
+		.yoco {
+			color: var(--icon-02);
+			pointer-events: none;
+		}
+
+		&:hover .yoco {
+			color: var(--icon-01);
+		}
 	}
 
-	&__expand {
-		margin-top: var(--unit-4);
+	&__action {
+		align-self: flex-start;
+		margin-top: -2px;
 	}
 
-	&__message {
-		flex: 1 1 100%;
-		padding: 0 var(--unit-4);
-		font-weight: 600;
-		color: var(--gray-70);
+	&__icon {
+		border-radius: var(--border-radius);
 	}
 
-	.yoco {
-		font-size: 1.2rem;
+	&__header {
+		font-weight: 700;
+		user-select: text;
+	}
+
+	&__text {
+		display: flex;
+		flex: 1 0;
+		flex-direction: column;
+		gap: var(--unit-1);
+		margin-top: 4px;
+		line-height: var(--unit-5);
+		user-select: text;
 	}
 }
 </style>
diff --git a/packages/kotti-ui/source/kotti-banner/index.ts b/packages/kotti-ui/source/kotti-banner/index.ts
index 4c7118cbc8..3d87ec5335 100755
--- a/packages/kotti-ui/source/kotti-banner/index.ts
+++ b/packages/kotti-ui/source/kotti-banner/index.ts
@@ -9,11 +9,25 @@ export const KtBanner = attachMeta(makeInstallable(KtBannerVue), {
 	deprecated: null,
 	designs: {
 		type: MetaDesignType.FIGMA,
-		url: 'https://www.figma.com/file/0yFVivSWXgFf2ddEF92zkf/Kotti-Design-System?node-id=1439%3A5',
+		url: 'https://www.figma.com/design/0yFVivSWXgFf2ddEF92zkf/Kotti-Design-System?node-id=7096-5539',
 	},
 	slots: {
-		default: {
-			description: 'Content when Banner is expanded',
+		action: {
+			description:
+				'Use this only if you need to implement a custom action button',
+			scope: null,
+		},
+		footer: {
+			description:
+				'Used to put e.g. buttons or other interactive elements at the bottom of the banner',
+			scope: null,
+		},
+		header: {
+			description: 'Used to replace the optional header text',
+			scope: null,
+		},
+		text: {
+			description: 'Used to replace the main text',
 			scope: null,
 		},
 	},
diff --git a/packages/kotti-ui/source/kotti-banner/types.ts b/packages/kotti-ui/source/kotti-banner/types.ts
index 9ac31877d9..38c62a2b48 100644
--- a/packages/kotti-ui/source/kotti-banner/types.ts
+++ b/packages/kotti-ui/source/kotti-banner/types.ts
@@ -1,22 +1,29 @@
 import { z } from 'zod'
 
-import { Yoco, yocoIconSchema } from '@3yourmind/yoco'
+import { yocoIconSchema } from '@3yourmind/yoco'
 
 export module KottiBanner {
+	export const styleSchema = z
+		.object({
+			backgroundColor: z.string(),
+			darkColor: z.string(),
+			icon: yocoIconSchema.nullable(),
+			lightColor: z.string(),
+		})
+		.strict()
+
+	export type Style = z.infer<typeof styleSchema>
+
 	export const propsSchema = z.object({
-		actionText: z.string().nullable().default(null),
-		expandCloseLabel: z.string().nullable().default(null),
-		expandLabel: z.string().nullable().default(null),
-		icon: yocoIconSchema.default(Yoco.Icon.ANNOUNCE),
-		isGray: z.boolean().default(false),
-		message: z.string(),
+		action: z.string().nullable().default(null),
+		header: z.string().nullable().default(null),
+		isCloseable: z.boolean().default(false),
+		text: z.string().nullable().default(null),
+		type: z
+			.union([styleSchema, z.enum(['error', 'info', 'success', 'warning'])])
+			.default('info'),
 	})
 
 	export type Props = z.input<typeof propsSchema>
 	export type PropsInternal = z.output<typeof propsSchema>
-
-	export type Translations = {
-		expandCloseLabel: string
-		expandLabel: string
-	}
 }
diff --git a/packages/kotti-ui/source/kotti-i18n/locales/de-DE.ts b/packages/kotti-ui/source/kotti-i18n/locales/de-DE.ts
index b81b6c7767..f80ebb5d57 100644
--- a/packages/kotti-ui/source/kotti-i18n/locales/de-DE.ts
+++ b/packages/kotti-ui/source/kotti-i18n/locales/de-DE.ts
@@ -18,10 +18,6 @@ module Common {
 }
 
 export const deDE: KottiI18n.Messages = {
-	KtBanner: {
-		expandCloseLabel: 'Schließen',
-		expandLabel: 'Öffnen',
-	},
 	KtComment: {
 		cancelMessage: 'Drücken Sie die Esc-Taste oder',
 		clickToCancelLabel: 'klicken Sie zum Abbrechen',
diff --git a/packages/kotti-ui/source/kotti-i18n/locales/en-US.ts b/packages/kotti-ui/source/kotti-i18n/locales/en-US.ts
index ff4a75aece..49f3d388ec 100644
--- a/packages/kotti-ui/source/kotti-i18n/locales/en-US.ts
+++ b/packages/kotti-ui/source/kotti-i18n/locales/en-US.ts
@@ -18,10 +18,6 @@ module Common {
 }
 
 export const enUS: KottiI18n.Messages = {
-	KtBanner: {
-		expandCloseLabel: 'Close',
-		expandLabel: 'View',
-	},
 	KtComment: {
 		cancelMessage: 'Press Esc key or',
 		clickToCancelLabel: 'click to cancel',
diff --git a/packages/kotti-ui/source/kotti-i18n/locales/es-ES.ts b/packages/kotti-ui/source/kotti-i18n/locales/es-ES.ts
index 753b3e78d7..f6d19381f6 100644
--- a/packages/kotti-ui/source/kotti-i18n/locales/es-ES.ts
+++ b/packages/kotti-ui/source/kotti-i18n/locales/es-ES.ts
@@ -18,10 +18,6 @@ module Common {
 }
 
 export const esES: KottiI18n.Messages = {
-	KtBanner: {
-		expandCloseLabel: 'Cerrar',
-		expandLabel: 'Ver',
-	},
 	KtComment: {
 		cancelMessage: 'Pulse la tecla Esc o',
 		clickToCancelLabel: 'haga clic para cancelar',
diff --git a/packages/kotti-ui/source/kotti-i18n/locales/fr-FR.ts b/packages/kotti-ui/source/kotti-i18n/locales/fr-FR.ts
index 63ce56d7d6..603d6d627c 100644
--- a/packages/kotti-ui/source/kotti-i18n/locales/fr-FR.ts
+++ b/packages/kotti-ui/source/kotti-i18n/locales/fr-FR.ts
@@ -18,10 +18,6 @@ module Common {
 }
 
 export const frFR: KottiI18n.Messages = {
-	KtBanner: {
-		expandCloseLabel: 'Fermer',
-		expandLabel: 'Voir',
-	},
 	KtComment: {
 		cancelMessage: 'Appuyez sur la touche Esc ou',
 		clickToCancelLabel: 'cliquez pour annuler',
diff --git a/packages/kotti-ui/source/kotti-i18n/locales/ja-JP.ts b/packages/kotti-ui/source/kotti-i18n/locales/ja-JP.ts
index 8233d708a9..9f2d47486e 100644
--- a/packages/kotti-ui/source/kotti-i18n/locales/ja-JP.ts
+++ b/packages/kotti-ui/source/kotti-i18n/locales/ja-JP.ts
@@ -18,10 +18,6 @@ module Common {
 }
 
 export const jaJP: KottiI18n.Messages = {
-	KtBanner: {
-		expandCloseLabel: '閉じる',
-		expandLabel: '表示',
-	},
 	KtComment: {
 		cancelMessage: 'Escキーを押すか',
 		clickToCancelLabel: 'クリックしてキャンセルします',
diff --git a/packages/kotti-ui/source/kotti-i18n/types.ts b/packages/kotti-ui/source/kotti-i18n/types.ts
index 41a9dfea79..3668c3d9e4 100644
--- a/packages/kotti-ui/source/kotti-i18n/types.ts
+++ b/packages/kotti-ui/source/kotti-i18n/types.ts
@@ -1,6 +1,5 @@
 import type { Ref } from 'vue'
 
-import type { KottiBanner } from '../kotti-banner/types'
 import type { KottiComment } from '../kotti-comment/types'
 import type { KottiField } from '../kotti-field/types'
 import type { Shared as KottiFieldFileUploadShared } from '../kotti-field-file-upload/types'
@@ -33,7 +32,6 @@ export module KottiI18n {
 	}
 
 	export type Messages = {
-		KtBanner: KottiBanner.Translations
 		KtComment: KottiComment.Translations
 		KtFieldFileUpload: KottiFieldFileUploadShared.Translations
 		KtFieldInlineEdit: KottiFieldInlineEdit.Translations
diff --git a/packages/kotti-ui/source/kotti-style/tokens.css b/packages/kotti-ui/source/kotti-style/tokens.css
index 2263c27883..10d90363eb 100644
--- a/packages/kotti-ui/source/kotti-style/tokens.css
+++ b/packages/kotti-ui/source/kotti-style/tokens.css
@@ -5,9 +5,19 @@
 */
 
 :root {
-	--white: #fff;
 	--black: #000;
+	--blue-10: #eaf0fa;
+	--blue-100: #0d244a;
+	--blue-20: #c1d7fb;
+	--blue-30: #afc5e8;
+	--blue-40: #6795e0;
+	--blue-50: #3173de;
+	--blue-60: #2c66c4;
+	--blue-70: #2659ab;
+	--blue-80: #1f55ad;
+	--blue-90: #153c7a;
 	--gray-10: #f8f8f8;
+	--gray-100: #141414;
 	--gray-20: #e0e0e0;
 	--gray-30: #c6c6c6;
 	--gray-40: #a8a8a8;
@@ -16,8 +26,18 @@
 	--gray-70: #525252;
 	--gray-80: #393939;
 	--gray-90: #262626;
-	--gray-100: #141414;
+	--green-10: #e6f8d2;
+	--green-20: #c4e0a5;
+	--green-50: #71c716;
+	--green-60: #64ad13;
+	--green-70: #549410;
+	--orange-10: #fde2cb;
+	--orange-20: #fab980;
+	--orange-50: #ff9333;
+	--orange-60: #ff7800;
+	--orange-70: #ba6820;
 	--primary-10: #eaf0fa;
+	--primary-100: #0d244a;
 	--primary-20: #c1d7fb;
 	--primary-30: #afc5e8;
 	--primary-40: #6795e0;
@@ -26,27 +46,20 @@
 	--primary-70: #2659ab;
 	--primary-80: #1f55ad;
 	--primary-90: #153c7a;
-	--primary-100: #0d244a;
-	--green-20: #c4e0a5;
-	--green-50: #71c716;
-	--green-60: #64ad13;
-	--green-70: #549410;
-	--red-20: #f0a8a8;
-	--red-50: #f21d1d;
-	--red-60: #d91919;
-	--red-70: #bf1717;
 	--purple-20: #b995ca;
 	--purple-50: #932dc2;
 	--purple-60: #6c218f;
 	--purple-70: #591b75;
+	--red-10: #fbe1e1;
+	--red-20: #f0a8a8;
+	--red-50: #f21d1d;
+	--red-60: #d91919;
+	--red-70: #bf1717;
+	--white: #fff;
 	--yellow-20: #fff9c0;
 	--yellow-50: #fff490;
 	--yellow-60: #ffe60d;
 	--yellow-70: #dfc903;
-	--orange-20: #fab980;
-	--orange-50: #ff9333;
-	--orange-60: #ff7800;
-	--orange-70: #ba6820;
 	--ui-background: var(--white);
 	--ui-01: var(--gray-10);
 	--ui-02: var(--gray-20);
@@ -76,15 +89,19 @@
 	--icon-02: var(--gray-50);
 	--icon-03: var(--white);
 	--support-error: var(--red-50);
+	--support-error-bg: var(--red-10);
 	--support-error-dark: var(--red-70);
 	--support-error-light: var(--red-20);
 	--support-warning: var(--orange-50);
+	--support-warning-bg: var(--orange-10);
 	--support-warning-dark: var(--orange-70);
 	--support-warning-light: var(--orange-20);
 	--support-success: var(--green-50);
+	--support-success-bg: var(--green-10);
 	--support-success-dark: var(--green-70);
 	--support-success-light: var(--green-20);
-	--support-info: var(--primary-50);
-	--support-info-dark: var(--primary-70);
-	--support-info-light: var(--primary-20);
+	--support-info: var(--blue-50);
+	--support-info-bg: var(--blue-10);
+	--support-info-dark: var(--blue-70);
+	--support-info-light: var(--blue-20);
 }
diff --git a/packages/kotti-ui/source/kotti-toaster/KtToast.vue b/packages/kotti-ui/source/kotti-toaster/KtToast.vue
new file mode 100644
index 0000000000..6227b902d0
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-toaster/KtToast.vue
@@ -0,0 +1,71 @@
+<script lang="ts">
+import { computed, defineComponent, inject } from 'vue'
+
+import { KtBanner } from '../kotti-banner'
+import { makeProps } from '../make-props'
+
+import { TOAST_CONTEXT, type ToastContext } from './context'
+import { KottiToast } from './types'
+
+export default defineComponent({
+	name: 'KtToast',
+	components: {
+		KtBanner,
+	},
+	props: makeProps(KottiToast.propsSchema),
+	setup(props, { slots }) {
+		const context = inject<ToastContext>(TOAST_CONTEXT) ?? null
+
+		if (context === null) throw new Error('Could not find KtToastContext')
+
+		return {
+			hasHeaderSlot: computed((): boolean => Boolean(slots.header)),
+			headerWithFallback: computed(() => props.header ?? context.value.header),
+			onDelete: () => {
+				context.value.delete()
+			},
+			progressWithFallback: computed(
+				() => props.progress ?? context.value.progress,
+			),
+			textWithFallback: computed(() => props.text ?? context.value.text),
+		}
+	},
+})
+</script>
+
+<template>
+	<div class="kt-toast">
+		<KtBanner isCloseable :type="type" @close="onDelete">
+			<template v-if="hasHeaderSlot" #header>
+				<div class="kt-banner__action">
+					<slot name="header" />
+				</div>
+			</template>
+			<template v-else-if="headerWithFallback" #header>
+				<div class="kt-banner__action">
+					{{ headerWithFallback }}
+				</div>
+			</template>
+			<template #text>
+				<slot name="text">
+					{{ textWithFallback }}
+				</slot>
+			</template>
+			<template #footer>
+				<slot name="actions" />
+			</template>
+		</KtBanner>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.kt-toast {
+	display: contents;
+}
+
+.kt-toast > * {
+	box-shadow:
+		0 4px 6px 0 rgba(0 0 0 / 10%),
+		0 2px 4px 0 rgba(0 0 0 / 6%);
+}
+</style>
diff --git a/packages/kotti-ui/source/kotti-toaster/KtToastProvider.vue b/packages/kotti-ui/source/kotti-toaster/KtToastProvider.vue
new file mode 100644
index 0000000000..48c02edb45
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-toaster/KtToastProvider.vue
@@ -0,0 +1,27 @@
+<script lang="ts">
+import { computed, defineComponent, type PropType, provide } from 'vue'
+
+import { TOAST_CONTEXT, type ToastContext } from './context'
+
+export default defineComponent({
+	name: 'KtToastProvider',
+	props: {
+		data: { required: true, type: Object as PropType<ToastContext> },
+	},
+	setup(props) {
+		provide(
+			TOAST_CONTEXT,
+			computed(() => props.data),
+		)
+
+		return {}
+	},
+})
+</script>
+
+<template>
+	<!-- TODO: Wrapping div can possibly be removed in vue3 -->
+	<div>
+		<slot />
+	</div>
+</template>
diff --git a/packages/kotti-ui/source/kotti-toaster/KtToaster.vue b/packages/kotti-ui/source/kotti-toaster/KtToaster.vue
index 8fb243dcaf..9ade381efa 100644
--- a/packages/kotti-ui/source/kotti-toaster/KtToaster.vue
+++ b/packages/kotti-ui/source/kotti-toaster/KtToaster.vue
@@ -1,167 +1,132 @@
-<template>
-	<div class="vue-yodify">
-		<div
-			v-for="notification in queue"
-			:key="notification.id"
-			class="vue-yodify__notification"
-		>
-			<div :class="iconClass(notification.type)">
-				<i class="yoco" v-text="iconText(notification.type)" />
-			</div>
-			<div class="vue-yodify__content" v-text="notification.text" />
-			<div
-				class="vue-yodify__close"
-				@click="deleteNotification(notification.id)"
-			>
-				<i class="yoco" v-text="'close'" />
-			</div>
-		</div>
-	</div>
-</template>
+<script lang="ts">
+import { computed, defineComponent, onBeforeMount, onUnmounted, ref } from 'vue'
 
-<script>
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { TimeConversion } from '@metatypes/units'
+import { makeProps } from '../make-props'
 
-import { isBrowser } from '../utilities'
+import type { RenderedMessage, ToasterReturn } from './create-toaster'
+import KtToast from './KtToast.vue'
+import KtToastProvider from './KtToastProvider.vue'
+import { KottiToaster } from './types'
 
-import { generateId, notId } from './utilities.js'
-
-const DEFAULT_DURATION_IN_SECONDS = 3
-
-/* eslint-disable perfectionist/sort-objects */
-export default {
+export default defineComponent({
 	name: 'KtToaster',
-	data() {
-		return { queue: [] }
-	},
-	created() {
-		let notification
-		while ((notification = this.$yodifyBuffer.pop()))
-			this.addNotification(notification)
-
-		this.$root.$on('vue-yodify', this.addNotification)
+	components: {
+		KtToast,
+		KtToastProvider,
 	},
-	beforeUnmount() {
-		this.$root.$off('vue-yodify', this.addNotification)
+	props: makeProps(KottiToaster.propsSchema),
+	setup(props) {
+		const currentToasts = ref<Array<RenderedMessage>>([])
+
+		const api = (
+			props.toaster as unknown as ToasterReturn<{
+				[key: string]: Record<string, unknown>
+				default: Record<string, never>
+			}>
+		)._internal_pls_dont_touch
+
+		onBeforeMount(() => {
+			api.subscribe((activeToasts) => {
+				currentToasts.value = activeToasts
+			})
+		})
+
+		onUnmounted(() => {
+			api.unsubscribe()
+			currentToasts.value = []
+		})
+
+		return {
+			renderedToasts: computed(() =>
+				currentToasts.value.map((toast) => ({
+					...toast,
+					context: {
+						custom: toast.custom,
+						delete: () => {
+							api.requestDelete(toast.metadata.id)
+						},
+						duration: toast.duration,
+						header: toast.header,
+						progress: toast.progress,
+						text: toast.text,
+						type: toast.type,
+					},
+				})),
+			),
+		}
 	},
-	methods: {
-		addNotification({
-			id = generateId(),
-			text,
-			type,
-			duration = DEFAULT_DURATION_IN_SECONDS *
-				TimeConversion.MILLISECONDS_PER_SECOND,
-		}) {
-			this.queue.push({ id, text, type })
-
-			if (isBrowser)
-				window.setTimeout(() => {
-					this.deleteNotification(id)
-				}, duration)
-		},
-		deleteNotification(id) {
-			this.queue = this.queue.filter(notId({ id }))
-		},
-		iconClass(notificationStatus) {
-			return `vue-yodify__icon vue-yodify__icon--${String(notificationStatus)}`
-		},
-		iconText(type) {
-			if (type === 'error') return 'circle_cross'
-			if (type === 'warning') return 'circle_attention'
-			return 'circle_check'
-		},
-	},
-}
-/* eslint-enable perfectionist/sort-objects */
-/* eslint-enable @typescript-eslint/explicit-module-boundary-types */
+})
 </script>
 
+<template>
+	<div class="kt-toaster">
+		<div class="kt-toaster__notifications">
+			<transition-group name="toast-yum" tag="div">
+				<KtToastProvider
+					v-for="toast in renderedToasts"
+					:key="toast.metadata.id"
+					class="toast-yum-item"
+					:data="toast.context"
+				>
+					<slot v-bind="toast.context" :name="toast.type">
+						<KtToast />
+					</slot>
+				</KtToastProvider>
+			</transition-group>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" scoped>
-.vue-yodify {
+.kt-toaster__notifications {
 	position: fixed;
-	top: 0;
-	right: 0.8rem;
-	z-index: 9999;
-}
-
-.vue-yodify__notification {
-	display: flex;
-	justify-content: space-between;
-	width: 448px;
-	margin: 1.2rem 0;
-	overflow: hidden;
-	background-color: white;
-	border-radius: 0.2rem;
-	box-shadow: 0 0.1rem 0.4rem rgb(0 0 0 / 24%);
-}
-
-.vue-yodify__icon,
-.vue-yodify__close {
-	display: flex;
-	flex: 0 0 2rem;
-	align-items: center;
-	justify-content: center;
-	min-height: 2rem;
-}
-
-.vue-yodify__icon {
-	&--success {
-		background: #64ad13;
-	}
-
-	&--error {
-		background: #d91919;
+	top: var(--unit-4);
+	right: var(--unit-4);
+	z-index: 100000;
+	width: 400px;
+
+	> div {
+		display: flex;
+		flex-direction: column;
+		gap: var(--unit-2);
 	}
+}
 
-	&--warning {
-		background: #ff7800;
-	}
+// animation
 
-	.yoco {
-		font-size: 1rem;
-		color: #fff;
-	}
-}
+$z-normal: 0;
+$z-leaving: -1;
 
-.vue-yodify__content {
-	display: flex;
-	flex: 1;
-	align-items: center;
-	height: 100%;
-	min-height: 1.2rem;
-	padding: 0.4rem;
+.toast-yum-item {
+	width: 400px;
+	isolation: isolate;
 }
 
-.vue-yodify__close {
-	.yoco {
-		font-size: 1rem;
-		color: #8a8a8a;
+@media (prefers-reduced-motion: no-preference) {
+	.toast-yum-item {
+		transition: all var(--transition-medium) ease-in-out;
 	}
 
-	&:hover {
-		cursor: pointer;
-		background-color: rgb(0 0 0 / 10%);
+	.toast-yum-move {
+		transition: transform var(--transition-short) ease-in-out;
 	}
-}
 
-// reset some commonly overwritten styles
-.vue-yodify,
-.vue-yodify * {
-	box-sizing: initial;
-	line-height: initial;
-}
+	.toast-yum-enter,
+	.toast-yum-leave-to {
+		opacity: 0;
+		transform: translateX(200px);
+	}
 
-// support for mobile device
-@media (width <= 460px) {
-	.vue-yodify__notification {
-		width: 96%;
-		margin: 2%;
+	.toast-yum-leave-active {
+		position: absolute;
+		z-index: $z-leaving;
+		transition: all var(--transition-medium) ease-in-out;
 	}
 
-	.vue-yodify {
-		right: 0;
-		width: 100%;
+	.toast-yum-leave-from {
+		z-index: $z-normal;
+		opacity: 1;
+		transform: translateX(0);
 	}
 }
 </style>
diff --git a/packages/kotti-ui/source/kotti-toaster/context.ts b/packages/kotti-ui/source/kotti-toaster/context.ts
new file mode 100644
index 0000000000..5d1ec3a273
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-toaster/context.ts
@@ -0,0 +1,10 @@
+import type { ComputedRef } from 'vue'
+
+export type ToastContext = ComputedRef<{
+	delete: () => void
+	header: string | null
+	progress: number | null
+	text: string
+}>
+
+export const TOAST_CONTEXT = Symbol('TOAST_CONTEXT')
diff --git a/packages/kotti-ui/source/kotti-toaster/create-deferred.ts b/packages/kotti-ui/source/kotti-toaster/create-deferred.ts
new file mode 100644
index 0000000000..7a19b92169
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-toaster/create-deferred.ts
@@ -0,0 +1,30 @@
+/**
+ * Creates a deferred promise, useful in scenarios where a promise needs to be created and
+ * resolved or rejected from an external context. This exposes `resolve` and `reject` functions,
+ * allowing external control over the promise's resolution state.
+ *
+ * @throws {Error} Throws an error if the promise's `resolve` or `reject` functions could not be initialized (which shouldn't occur under typical JavaScript execution).
+ */
+export const createDeferred = <PROMISE_RESOLUTION_TYPE>(): {
+	promise: Promise<PROMISE_RESOLUTION_TYPE>
+	reject: (arg: unknown) => void
+	resolve: (res: PROMISE_RESOLUTION_TYPE) => void
+} => {
+	let resolve: ((res: PROMISE_RESOLUTION_TYPE) => void) | null = null
+	let reject: ((arg: unknown) => void) | null = null
+
+	const promise = new Promise<PROMISE_RESOLUTION_TYPE>((res, rej) => {
+		resolve = res
+		reject = rej
+	})
+
+	// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+	if (resolve === null || reject === null)
+		throw new Error('could not create deferred promise')
+
+	return {
+		promise,
+		reject,
+		resolve,
+	}
+}
diff --git a/packages/kotti-ui/source/kotti-toaster/create-toaster.test.ts b/packages/kotti-ui/source/kotti-toaster/create-toaster.test.ts
new file mode 100644
index 0000000000..f46e707872
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-toaster/create-toaster.test.ts
@@ -0,0 +1,509 @@
+import { describe, expect, it, vitest } from 'vitest'
+
+import { createToaster } from './create-toaster'
+
+const DEBUG: boolean = false
+
+const createAnimationFrameMock = () => {
+	let interval: Timer | null = null
+	return {
+		getIsRunning: () => interval !== null,
+		start: (update: () => void) => {
+			if (interval)
+				throw new Error(
+					'Could not start animation frame, already running. This is likely a bug.',
+				)
+
+			if (DEBUG) console.log('animation-frame-mock: start')
+			interval = globalThis.setInterval(() => {
+				if (DEBUG) console.log('animation-frame-mock: update')
+				update()
+			}, 5)
+		},
+		stop: () => {
+			if (DEBUG) console.log('animation-frame-mock: stop')
+			if (interval) {
+				globalThis.clearInterval(interval)
+				interval = null
+			}
+		},
+	}
+}
+
+describe('createToaster', () => {
+	it('returns things', () => {
+		const toaster = createToaster({
+			animationFrame: createAnimationFrameMock(),
+		})
+
+		expect(toaster).toEqual({
+			_internal_pls_dont_touch: expect.anything(),
+			abort: expect.anything(),
+			show: expect.anything(),
+			withOptions: expect.anything(),
+		})
+	})
+
+	describe('.abort()', () => {
+		it('can abort a toast', async () => {
+			const toaster = createToaster()
+
+			const toast = toaster.show({ duration: 1, text: 'test' })
+			expect(() => {
+				toaster.abort(toast.metadata.id)
+			}).not.toThrow()
+			expect(toast.metadata.abortController.signal.aborted).toBe(true)
+			await expect(toast.done).rejects.toThrow('INTERNAL_ABORT')
+		})
+
+		it('cannot abort an aborted toast', async () => {
+			const toaster = createToaster()
+
+			const toast = toaster.show({ duration: 1, text: 'test' })
+			expect(() => {
+				toaster.abort(toast.metadata.id)
+			}).not.toThrow()
+			expect(toast.metadata.abortController.signal.aborted).toBe(true)
+			await expect(toast.done).rejects.toThrow('INTERNAL_ABORT')
+			expect(() => {
+				toaster.abort(toast.metadata.id)
+			}).toThrow()
+		})
+
+		it('cannot abort an already toasted toast', async () => {
+			const toaster = createToaster({
+				animationFrame: createAnimationFrameMock(),
+			})
+			toaster._internal_pls_dont_touch.subscribe(() => {})
+
+			const toast = toaster.show({ duration: 1, text: 'test' })
+			await expect(toast.done).resolves.toBe('deleted')
+			expect(() => {
+				toaster.abort(toast.metadata.id)
+			}).toThrow()
+		})
+
+		it('throws for unknown toasts', async () => {
+			const toaster = createToaster({
+				animationFrame: createAnimationFrameMock(),
+			})
+			toaster._internal_pls_dont_touch.subscribe(() => {})
+			const toast = toaster.show({ duration: 1, text: 'test' })
+			expect(() => {
+				toaster.abort('not-a-real-toast')
+			}).toThrow(
+				'could not find toast in fifoToasterQueue with id “not-a-real-toast”',
+			)
+			expect(toast.metadata.abortController.signal.aborted).toBe(false)
+			await expect(toast.done).resolves.toBe('deleted')
+		})
+	})
+
+	describe('.withOptions()', () => {
+		it('can create a customized show function', () => {
+			const toaster = createToaster()
+			const show = toaster.withOptions({
+				duration: 3000,
+			})
+			expect(show).toBeInstanceOf(Function)
+		})
+
+		it('can call customized show function', () => {
+			const toaster = createToaster()
+			const show = toaster.withOptions({
+				duration: 3000,
+			})
+			expect(() => show({ duration: 1, text: 'some text' })).not.toThrowError()
+		})
+	})
+
+	describe('.show()', () => {
+		it('can push', async () => {
+			const toaster = createToaster({
+				animationFrame: createAnimationFrameMock(),
+			})
+			toaster._internal_pls_dont_touch.subscribe(() => {})
+			const toast = toaster.show({ duration: 1, text: 'example toast' })
+
+			expect(toast.text).toBe('example toast')
+			await expect(toast.done).resolves.toBe('deleted')
+		})
+
+		it('correctly handles durations', async () => {
+			const toaster = createToaster({
+				animationFrame: createAnimationFrameMock(),
+			})
+			toaster._internal_pls_dont_touch.subscribe(() => {})
+
+			const wait = (ms: number) =>
+				new Promise((_resolve, reject) => {
+					globalThis.setTimeout(() => {
+						reject(new Error(`timeout after ${ms}ms`))
+					}, ms)
+				})
+
+			const fastToast = toaster.show({ duration: 1, text: 'fast toast' })
+			await expect(Promise.race([fastToast.done, wait(10)])).resolves.toBe(
+				'deleted',
+			)
+
+			const slowToast = toaster.show({ duration: 100, text: 'slow toast' })
+			await expect(Promise.race([slowToast.done, wait(200)])).resolves.toBe(
+				'deleted',
+			)
+
+			const superSlowToast = toaster.show({
+				duration: 500,
+				text: 'super slow toast',
+			})
+			await expect(
+				Promise.race([superSlowToast.done, wait(200)]),
+			).rejects.toThrow('timeout')
+		})
+
+		it('can push custom data', async () => {
+			const custom = { testing: true }
+
+			const toaster = createToaster<{
+				default: Record<string, never>
+				test: { testing: boolean }
+			}>({
+				animationFrame: createAnimationFrameMock(),
+			})
+			toaster._internal_pls_dont_touch.subscribe(() => {})
+			const toast = toaster.show({
+				custom,
+				duration: 1,
+				text: 'example toast',
+				type: 'test',
+			})
+
+			expect(toast.custom).toEqual(custom)
+			await expect(toast.done).resolves.toBe('deleted')
+		})
+
+		it('can push with metadata.id', async () => {
+			const toaster = createToaster({
+				animationFrame: createAnimationFrameMock(),
+			})
+			toaster._internal_pls_dont_touch.subscribe(() => {})
+			const toast = toaster.show({
+				duration: 1,
+				metadata: { id: 'foo' },
+				text: 'example toast',
+			})
+
+			expect(toast.metadata.id).toEqual('foo')
+			await expect(toast.done).resolves.toBe('deleted')
+		})
+
+		it('can push with metadata.abortController', async () => {
+			const toaster = createToaster({
+				animationFrame: createAnimationFrameMock(),
+			})
+			const abortController = new globalThis.AbortController()
+			const toast = toaster.show({
+				duration: 1,
+				metadata: { abortController },
+				text: 'example toast',
+			})
+
+			expect(toast.metadata.abortController).toBe(abortController)
+			expect(() => {
+				toast.abort()
+			}).not.toThrow()
+			expect(abortController.signal.aborted).toBe(true)
+			await expect(toast.done).rejects.toThrow('INTERNAL_ABORT')
+		})
+
+		describe('returns', () => {
+			it('.abort()', async () => {
+				const toaster = createToaster({
+					animationFrame: createAnimationFrameMock(),
+				})
+				toaster._internal_pls_dont_touch.subscribe(() => {})
+				const toast = toaster.show({ duration: 1, text: '42' })
+
+				expect(toast.metadata.abortController.signal.aborted).toBe(false)
+				toast.abort()
+				expect(toast.metadata.abortController.signal.aborted).toBe(true)
+				await expect(toast.done).rejects.toThrow('INTERNAL_ABORT')
+			})
+
+			it('supports await toast.done', async () => {
+				const toaster = createToaster({
+					animationFrame: createAnimationFrameMock(),
+				})
+				toaster._internal_pls_dont_touch.subscribe(() => {})
+				const toast = toaster.show({ duration: 10, text: '42' })
+
+				await expect(toast.done).resolves.toBe('deleted')
+			})
+		})
+	})
+
+	describe('._internal_pls_dont_touch', () => {
+		describe('.requestDelete()', () => {
+			it('deletes a toast', async () => {
+				const toaster = createToaster({
+					animationFrame: createAnimationFrameMock(),
+				})
+				toaster._internal_pls_dont_touch.subscribe(() => {})
+
+				let testPromiseIsDone = false
+
+				const toast = toaster.show({ text: 'test' })
+
+				void toast.done.then(() => {
+					testPromiseIsDone = true
+				})
+
+				expect(testPromiseIsDone).toBe(false)
+				toaster._internal_pls_dont_touch.requestDelete(toast.metadata.id)
+				await new Promise((res) => globalThis.setTimeout(res, 1))
+				expect(testPromiseIsDone).toBe(true)
+			})
+		})
+
+		describe('.subscribe()', () => {
+			it('can subscribe', () => {
+				const toaster = createToaster({
+					animationFrame: createAnimationFrameMock(),
+				})
+				const handler = vitest.fn()
+
+				toaster._internal_pls_dont_touch.subscribe(handler)
+
+				expect(handler.mock.calls).toEqual([[[]]])
+				toaster.show({ text: 'test' })
+				expect(handler.mock.calls).toEqual([[[]], [[expect.anything()]]])
+			})
+
+			it('correctly handles old toasts upon subscribing', () => {
+				const toaster = createToaster({
+					animationFrame: createAnimationFrameMock(),
+				})
+				const handler = vitest.fn()
+
+				toaster.show({ text: 'test' })
+
+				expect(handler.mock.calls).toEqual([])
+				toaster._internal_pls_dont_touch.subscribe(handler)
+				expect(handler.mock.calls).toEqual([
+					[
+						[
+							{
+								custom: {},
+								duration: null,
+								header: null,
+								metadata: expect.anything(),
+								progress: null,
+								text: 'test',
+								type: 'default',
+							},
+						],
+					],
+				])
+			})
+
+			it('prevents multiple simultaneous subscriptions', () => {
+				const toaster = createToaster()
+				const handler = () => {}
+
+				expect(() => {
+					toaster._internal_pls_dont_touch.subscribe(handler)
+				}).not.toThrow()
+
+				expect(() => {
+					toaster._internal_pls_dont_touch.subscribe(handler)
+				}).toThrow('toaster already has a subscriber')
+			})
+
+			it('receives messages in FIFO order', async () => {
+				const toaster = createToaster({
+					animationFrame: createAnimationFrameMock(),
+				})
+				const handler = vitest.fn()
+
+				const toast1 = toaster.show({ duration: 50, text: 'test' })
+				const toast2 = toaster.show({ duration: 50, text: 'test 2' })
+
+				expect(handler.mock.calls).toEqual([])
+				toaster._internal_pls_dont_touch.subscribe(handler)
+				expect(handler.mock.lastCall![0][0]).toMatchObject({ text: 'test' })
+				expect(handler.mock.lastCall![0][1]).toMatchObject({ text: 'test 2' })
+
+				await Promise.all([toast1.done, toast2.done])
+
+				expect(handler.mock.lastCall).toEqual([[]])
+
+				const toast3 = toaster.show({ duration: 50, text: 'test 3' })
+				expect(handler.mock.lastCall![0][0]).toMatchObject({ text: 'test 3' })
+
+				await toast3.done
+				expect(handler.mock.lastCall).toEqual([[]])
+			})
+		})
+
+		describe('.unsubscribe()', () => {
+			it('can unsubscribe', () => {
+				const toaster = createToaster()
+				const handler = vitest.fn()
+
+				toaster._internal_pls_dont_touch.subscribe(handler)
+				toaster._internal_pls_dont_touch.unsubscribe()
+
+				expect(handler.mock.calls).toEqual([[[]]])
+				toaster.show({ text: 'test' })
+				expect(handler.mock.calls).toEqual([[[]]])
+			})
+
+			it('throws when unsubscribe without a subscription', () => {
+				const toaster = createToaster()
+
+				expect(() => {
+					toaster._internal_pls_dont_touch.unsubscribe()
+				}).toThrow('toaster currently has no subscriber')
+			})
+		})
+	})
+})
+
+// type-level tests
+// HACK: These tests don’t actually need to be run, they work by letting tsc report any type errors
+const doNotRun = () => {
+	const toaster = createToaster<{
+		default: Record<string, never>
+		error: { error: 'error' }
+	}>()
+
+	// @ts-expect-error wrong, can not pass arbitrary arguments
+	toaster.withOptions({
+		any: 'thing',
+		type: 'error',
+	})({
+		custom: { error: 'error' },
+		text: 'wow',
+	})
+
+	// @ts-expect-error wrong, text is not allowed
+	toaster.withOptions({ text: 'something' })
+
+	// @ts-expect-error wrong, custom is not supported in withOptions
+	toaster.withOptions({ custom: {}, type: 'default' })({
+		// @ts-expect-error wrong, overriding types is not supported in withOptions
+		custom: { error: 'error' },
+		text: 'error',
+		// @ts-expect-error wrong, overriding types is not supported in withOptions
+		type: 'error',
+	})
+
+	// @ts-expect-error wrong, custom should be empty
+	toaster.withOptions({ custom: {}, type: 'default' })({ text: 'wow' })
+
+	// @ts-expect-error wrong, custom should not be empty
+	toaster.withOptions({
+		custom: {},
+		type: 'error',
+	})
+
+	toaster.withOptions({ type: 'default' })({ text: 'wow' })
+	toaster.withOptions({ type: 'default' })({ custom: {}, text: 'wow' })
+
+	// @ts-expect-error wrong, can not override type
+	toaster.withOptions({ type: 'error' })({
+		custom: {
+			error: 'error',
+		},
+		text: 'wow',
+		type: 'default',
+	})
+
+	toaster.withOptions({ type: 'error' })({
+		// @ts-expect-error wrong, custom should not be empty
+		custom: {},
+		text: 'wow',
+	})
+
+	toaster.withOptions({ type: 'error' })({
+		custom: { error: 'error' },
+		text: 'wow',
+	})
+	toaster.withOptions({
+		duration: 5000,
+		type: 'error',
+	})({
+		custom: { error: 'error' },
+		duration: 6000,
+		text: 'wow',
+	})
+
+	// @ts-expect-error wrong, text was not provided
+	toaster.withOptions({ type: 'default' })({
+		duration: 4000,
+	})
+
+	// @ts-expect-error wrong, custom was not provided
+	toaster.withOptions({ type: 'error' })({
+		text: 'wow',
+	})
+
+	// @ts-expect-error wrong, text was not provided
+	toaster.withOptions({ type: 'error' })({
+		custom: { error: 'error' },
+	})
+
+	toaster.withOptions({ type: 'default' })({
+		// @ts-expect-error wrong, can not override type
+		custom: { error: 'error' },
+		text: 'wow',
+		// @ts-expect-error wrong, can not override type
+		type: 'error',
+	})
+
+	// @ts-expect-error wrong, custom should not be empty
+	toaster.withOptions({ duration: 5000 })({
+		custom: {}, // wrong
+		text: 'wow',
+		type: 'error',
+	})
+
+	toaster.withOptions({ duration: 5000 })({
+		// @ts-expect-error wrong, custom should be empty
+		custom: { error: 'error' },
+		text: 'wow',
+		type: 'default',
+	})
+
+	toaster.withOptions({ duration: 5000 })({
+		custom: { error: 'error' },
+		text: 'wow',
+		type: 'error',
+	})
+
+	// return types
+
+	const myToaster = createToaster<{
+		default: Record<string, never>
+		error: { error: 'error' }
+		success: { success: 'success' }
+	}>()
+
+	const res1 = myToaster.show({
+		custom: {
+			error: 'error',
+			key: true, // error
+		},
+		text: 'wow',
+		type: 'error',
+	})
+
+	// @ts-expect-error expected type test failurue, should only allow toast1.custom.success
+	res1.custom.success
+	res1.custom.error
+
+	res1.metadata
+}
+
+// make linters happy
+if (Math.random() > 2) doNotRun()
diff --git a/packages/kotti-ui/source/kotti-toaster/create-toaster.ts b/packages/kotti-ui/source/kotti-toaster/create-toaster.ts
new file mode 100644
index 0000000000..ca09711842
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-toaster/create-toaster.ts
@@ -0,0 +1,504 @@
+import { nanoid } from 'nanoid'
+import { z } from 'zod'
+
+import { createDeferred } from './create-deferred'
+
+const customSchema = z.record(z.unknown())
+
+const durationSchema = z.number().int().finite().positive().nullable()
+
+const metadataSchema = z
+	.object({
+		abortController: z.instanceof(globalThis.AbortController),
+		id: z.string(),
+	})
+	.strict()
+
+const queuedToastSchema = z
+	.object({
+		custom: customSchema,
+		deferred: z
+			.object({
+				promise: z.promise(z.literal('deleted')),
+				reject: z.function().args(z.unknown()).returns(z.void()),
+				resolve: z.function().args(z.literal('deleted')).returns(z.void()),
+			})
+			.strict(),
+		duration: durationSchema,
+		header: z.string().nullable(),
+		metadata: metadataSchema,
+		text: z.string(),
+		type: z.string(),
+	})
+	.strict()
+
+export type QueuedToast = z.output<typeof queuedToastSchema>
+
+const renderedMessageSchema = z
+	.object({
+		custom: customSchema,
+		duration: z.number().positive().finite().nullable(),
+		header: z.string().nullable(),
+		metadata: metadataSchema,
+		progress: z.number().min(0).max(1).nullable(),
+		text: z.string(),
+		type: z.string(),
+	})
+	.strict()
+
+export type RenderedMessage = z.output<typeof renderedMessageSchema>
+
+const messageSchema = z
+	.object({
+		custom: customSchema.default(() => ({})),
+		duration: durationSchema.default(null),
+		header: z.string().nullable().default(null),
+		metadata: z
+			.object({
+				abortController: z
+					.instanceof(globalThis.AbortController)
+					.default(() => new globalThis.AbortController()),
+				id: z.string().default(nanoid),
+			})
+			.strict()
+			.default(() => ({})),
+		text: z.string(),
+		type: z.string().default('default'),
+	})
+	.strict()
+
+const subscribeHandlerSchema = z
+	.function()
+	.args(z.array(renderedMessageSchema))
+	.returns(z.union([z.promise(z.void()), z.void()]))
+
+type SubscribeHandler = z.output<typeof subscribeHandlerSchema>
+
+// utilties
+
+type IsEmptyObject<T> = T extends Record<string, never> ? true : false
+
+// messages
+
+type MessageTypes = {
+	[key: string]: Record<string, unknown>
+	default: Record<string, never>
+}
+
+type Messages<MESSAGE_TYPES extends MessageTypes> = {
+	[TYPE in keyof MESSAGE_TYPES]: Omit<
+		z.input<typeof messageSchema>,
+		'custom' | 'type'
+	> &
+		(IsEmptyObject<MESSAGE_TYPES[TYPE]> extends true
+			? { custom?: MESSAGE_TYPES[TYPE] }
+			: { custom: MESSAGE_TYPES[TYPE] }) &
+		(TYPE extends 'default' ? { type?: 'default' } : { type: TYPE })
+}
+
+type MessagesNoDefault<MESSAGE_TYPES extends MessageTypes> = {
+	[KEY in keyof MESSAGE_TYPES]: {
+		duration?: number | null
+		header?: string | null
+		text: string
+		type: KEY
+	} & (IsEmptyObject<MESSAGE_TYPES[KEY]> extends true
+		? { custom?: MESSAGE_TYPES[KEY] }
+		: { custom: MESSAGE_TYPES[KEY] })
+}
+
+// show etc.
+
+type ShowResult<
+	MESSAGE_TYPES extends MessageTypes,
+	TYPE extends keyof MESSAGE_TYPES,
+> = {
+	abort: () => void
+	custom: MESSAGE_TYPES[TYPE]
+	done: Promise<'deleted'>
+	header: string | null
+	metadata: z.output<typeof metadataSchema>
+	text: string
+}
+
+type Show<MESSAGE_TYPES extends MessageTypes> = <
+	MESSAGE extends Messages<MESSAGE_TYPES>[keyof MESSAGE_TYPES & string],
+>(
+	message: Exclude<
+		keyof MESSAGE,
+		keyof Messages<MESSAGE_TYPES>[keyof MESSAGE_TYPES & string]
+	> extends never
+		? MESSAGE
+		: never,
+) => ShowResult<
+	MESSAGE_TYPES,
+	MESSAGE extends { type: infer TYPE } ? TYPE : 'default'
+>
+
+type WithInferredOptions<
+	MESSAGE_TYPES extends MessageTypes,
+	OPTIONS extends {
+		duration?: number | null
+		type?: keyof MESSAGE_TYPES
+	},
+> = OPTIONS extends {
+	duration?: number | null
+	type: infer TYPE extends keyof MESSAGE_TYPES
+}
+	?
+			| MessagesNoDefault<MESSAGE_TYPES>[TYPE]
+			| Omit<Messages<MESSAGE_TYPES>[TYPE], 'type'>
+	: Messages<MESSAGE_TYPES>[keyof MESSAGE_TYPES]
+
+type WithOptions<MESSAGE_TYPES extends MessageTypes> = <
+	BASE_OPTIONS extends {
+		duration?: number | null
+		type?: keyof MESSAGE_TYPES
+	},
+>(
+	baseOptions: Exclude<keyof BASE_OPTIONS, 'duration' | 'type'> extends never
+		? BASE_OPTIONS
+		: `Argument "${Exclude<keyof BASE_OPTIONS & string, 'duration' | 'type'>}" is not supported`,
+) => <OPTIONS extends WithInferredOptions<MESSAGE_TYPES, BASE_OPTIONS>>(
+	options: Exclude<
+		keyof OPTIONS,
+		keyof WithInferredOptions<MESSAGE_TYPES, BASE_OPTIONS>
+	> extends never
+		? OPTIONS
+		: `Argument "${Exclude<keyof OPTIONS & string, 'duration' | 'type'>}" is not supported`,
+) => ShowResult<
+	MESSAGE_TYPES,
+	BASE_OPTIONS & OPTIONS extends {
+		type: infer TYPE extends keyof MESSAGE_TYPES
+	}
+		? TYPE
+		: 'default'
+>
+
+export type ToasterReturn<MESSAGE_TYPES extends MessageTypes> = {
+	abort: (toastId: string) => void
+	show: Show<MESSAGE_TYPES>
+	withOptions: WithOptions<MESSAGE_TYPES>
+
+	// internal
+	_internal_pls_dont_touch: {
+		requestDelete: (toastId: string) => void
+		subscribe: (handler: z.output<typeof subscribeHandlerSchema>) => void
+		unsubscribe: () => void
+	}
+}
+
+const createToasterOptions = z
+	.object({
+		animationFrame: z
+			.object({
+				getIsRunning: z.function().args().returns(z.boolean()),
+				start: z
+					.function()
+					.args(z.function().args().returns(z.void()))
+					.returns(z.void()),
+				stop: z.function().args().returns(z.void()),
+			})
+			.strict()
+			.default(() => {
+				let animationFrameId: number | null = null
+				return {
+					getIsRunning: () => animationFrameId !== null,
+					start: (update) => {
+						const animate = () => {
+							// Leave console log for now, so issues with the toaster have a chance to be detected
+							// eslint-disable-next-line no-console
+							console.log('create-toaster: update')
+							animationFrameId = globalThis.requestAnimationFrame(animate)
+							update()
+						}
+						animationFrameId = globalThis.requestAnimationFrame(animate)
+					},
+					stop: () => {
+						if (animationFrameId) {
+							globalThis.cancelAnimationFrame(animationFrameId)
+							animationFrameId = null
+						}
+					},
+				}
+			}),
+		// eslint-disable-next-line no-magic-numbers
+		numberOfToasts: z.number().int().positive().finite().default(3),
+	})
+	.strict()
+	.default(() => ({}))
+
+type CreateToasterOptions = z.input<typeof createToasterOptions>
+
+type ActiveToast = {
+	beginTime: number
+	endTime: number | null
+	message: QueuedToast
+	progress: number | null
+}
+
+const INTERNAL_ABORT = 'INTERNAL_ABORT'
+
+const calculateProgress = (start: number, now: number, end: number): number => {
+	const unclamped = (now - start) / (end - start)
+	return Math.max(Math.min(unclamped, 1), 0)
+}
+
+// --------------------------------------------------------------- //
+// --------------------------------------------------------------- //
+// -- Begin of implementation ------------------------------------ //
+// --------------------------------------------------------------- //
+// --------------------------------------------------------------- //
+
+export const createToaster = <
+	MESSAGE_TYPES extends MessageTypes = { default: Record<string, never> },
+>(
+	_options: CreateToasterOptions = {},
+): ToasterReturn<MESSAGE_TYPES> => {
+	const options = createToasterOptions.parse(_options)
+
+	const fifoToasterQueue: Array<QueuedToast> = []
+	const activeToasts: Array<ActiveToast> = []
+
+	let subscriber: SubscribeHandler | null = null
+	const notifySubscriber = () => {
+		if (subscriber === null) return
+
+		void subscriber(
+			activeToasts.map((toast) => ({
+				custom: toast.message.custom,
+				duration: toast.message.duration,
+				header: toast.message.header,
+				metadata: toast.message.metadata,
+				progress: toast.progress,
+				text: toast.message.text,
+				type: toast.message.type,
+			})),
+		)
+	}
+
+	const deleteToastFromActiveToasts = (toastId: string) => {
+		const index = activeToasts.findIndex(
+			(toast) => toast.message.metadata.id === toastId,
+		)
+		if (index === -1)
+			throw new Error(
+				`could not find toast in activeToasts with id “${toastId}”`,
+			)
+
+		const removedToast = activeToasts.splice(index, 1)[0]
+
+		if (!removedToast)
+			throw new Error(
+				`could not find toast in activeToasts with id “${toastId}”`,
+			)
+
+		notifySubscriber()
+		return removedToast.message
+	}
+
+	const deleteToastFromFifoQueue = (toastId: string) => {
+		const index = fifoToasterQueue.findIndex(
+			(toast) => toast.metadata.id === toastId,
+		)
+		if (index === -1)
+			throw new Error(
+				`could not find toast in fifoToasterQueue with id “${toastId}”`,
+			)
+
+		const removedToast = fifoToasterQueue.splice(index, 1)[0]
+
+		if (!removedToast)
+			throw new Error(
+				`could not find toast in fifoToasterQueue with id “${toastId}”`,
+			)
+
+		return removedToast
+	}
+
+	const deleteAndAbortToast = (mode: 'abort' | 'delete', toastId: string) => {
+		const removedToast = activeToasts.some(
+			(toast) => toast.message.metadata.id === toastId,
+		)
+			? deleteToastFromActiveToasts(toastId)
+			: deleteToastFromFifoQueue(toastId)
+
+		switch (mode) {
+			case 'abort': {
+				const { abortController } = removedToast.metadata
+
+				if (!abortController.signal.aborted) {
+					abortController.abort(INTERNAL_ABORT)
+				}
+
+				removedToast.deferred.reject(
+					abortController.signal.aborted
+						? abortController.signal.reason
+						: 'aborted',
+				)
+				break
+			}
+			case 'delete': {
+				removedToast.deferred.resolve('deleted')
+				break
+			}
+		}
+	}
+
+	/**
+	 * Updates the list of active toasts, managing their display duration and progress.
+	 *
+	 * - If a toast has an `endTime`, it calculates its progress based on the current time.
+	 * - If a toast's progress reaches 100%, it is deleted and resolved.
+	 * - If there is room for more toasts, it moves items from the `fifoToasterQueue` to `activeToasts`.
+	 * - Manages the animation frame, starting or stopping it based on whether there are active toasts.
+	 * - Notifies the subscriber if the state of `activeToasts` changes.
+	 */
+	const updateActiveToasts = (_dirty = false) => {
+		if (subscriber === null) return
+		let dirty = _dirty
+
+		let index = 0
+		while (index < activeToasts.length) {
+			const toast = activeToasts[index] as ActiveToast
+
+			if (toast.endTime === null) {
+				index++
+				continue
+			}
+
+			toast.progress = calculateProgress(
+				toast.beginTime,
+				Date.now(),
+				toast.endTime,
+			)
+			dirty = true
+
+			if (toast.progress >= 1) {
+				deleteAndAbortToast('delete', toast.message.metadata.id)
+				continue
+			}
+			index++
+		}
+
+		while (activeToasts.length < options.numberOfToasts) {
+			const message = fifoToasterQueue.shift() ?? null
+			if (message === null) break
+
+			activeToasts.push({
+				beginTime: Date.now(),
+				endTime: message.duration ? Date.now() + message.duration : null,
+				message,
+				progress: message.duration ? 0 : null,
+			})
+			dirty = true
+		}
+
+		const isRunning = options.animationFrame.getIsRunning()
+		const isNowEmpty = activeToasts.length === 0
+
+		if (!isRunning && !isNowEmpty) {
+			options.animationFrame.start(() => {
+				updateActiveToasts()
+			})
+		} else if (isRunning && isNowEmpty) {
+			options.animationFrame.stop()
+		}
+
+		if (dirty) notifySubscriber()
+	}
+
+	const show: Show<MESSAGE_TYPES> = <
+		MESSAGE,
+		TYPE extends keyof MESSAGE_TYPES = MESSAGE extends {
+			type: infer TYPE extends keyof MESSAGE_TYPES
+		}
+			? TYPE
+			: 'default',
+	>(
+		message: MESSAGE,
+	) => {
+		const options = messageSchema.parse(message)
+
+		const doneDeferred = createDeferred<'deleted'>()
+		const { signal } = options.metadata.abortController
+
+		signal.addEventListener('abort', () => {
+			if (signal.reason !== INTERNAL_ABORT)
+				deleteAndAbortToast('abort', options.metadata.id)
+		})
+
+		fifoToasterQueue.push({
+			custom: options.custom,
+			deferred: doneDeferred,
+			duration: options.duration,
+			header: options.header,
+			metadata: options.metadata,
+			text: options.text,
+			type: options.type,
+		})
+
+		updateActiveToasts()
+
+		return {
+			abort: () => {
+				deleteAndAbortToast('abort', options.metadata.id)
+			},
+			custom: options.custom as MESSAGE_TYPES[TYPE],
+			done: doneDeferred.promise,
+			header: options.header,
+			metadata: options.metadata,
+			text: options.text,
+			type: options.type as TYPE,
+		}
+	}
+
+	return {
+		abort: (toastId: string) => {
+			deleteAndAbortToast('abort', toastId)
+		},
+		show,
+		withOptions: (baseOptions) => (options) =>
+			show({
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				...(baseOptions as any),
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				...(options as any),
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			}) as any,
+		/**
+		 * The methods in here expose the toasts from `activeToasts` to a single subscriber.
+		 * Toasts from `fifoToasterQueue` are kept private.
+		 *
+		 * The subscriber:
+		 * - gets updated whenever `activeToasts` gets mutated
+		 * - can delete a specific toast by id
+		 */
+		_internal_pls_dont_touch: {
+			requestDelete: (deleteId) => {
+				deleteAndAbortToast('delete', deleteId)
+				updateActiveToasts(true)
+			},
+			subscribe: (handler) => {
+				if (subscriber)
+					throw new Error(
+						'create-toaster: toaster already has a subscriber, aborting',
+					)
+
+				subscriber = handler
+
+				updateActiveToasts(true)
+			},
+			unsubscribe: () => {
+				if (!subscriber)
+					throw new Error(
+						'create-toaster: toaster currently has no subscriber, aborting',
+					)
+
+				options.animationFrame.stop()
+
+				subscriber = null
+			},
+		},
+	}
+}
diff --git a/packages/kotti-ui/source/kotti-toaster/index.ts b/packages/kotti-ui/source/kotti-toaster/index.ts
index 55c8ddd7ab..f5c91bf0ad 100644
--- a/packages/kotti-ui/source/kotti-toaster/index.ts
+++ b/packages/kotti-ui/source/kotti-toaster/index.ts
@@ -1,15 +1,68 @@
 import { MetaDesignType } from '../types/kotti'
 import { attachMeta, makeInstallable } from '../utilities'
 
+import KtToastVue from './KtToast.vue'
 import KtToasterVue from './KtToaster.vue'
+import { KottiToast, KottiToaster } from './types'
+
+export { createToaster } from './create-toaster'
 
 export const KtToaster = attachMeta(makeInstallable(KtToasterVue), {
-	addedVersion: '1.0.0',
+	addedVersion: '8.0.0',
 	deprecated: null,
 	designs: {
 		type: MetaDesignType.FIGMA,
-		url: 'https://www.figma.com/file/0yFVivSWXgFf2ddEF92zkf/Kotti-Design-System?node-id=128%3A2082',
+		url: 'https://www.figma.com/design/0yFVivSWXgFf2ddEF92zkf/Kotti-Design-System?node-id=6671-10835',
+	},
+	slots: {
+		default: {
+			description:
+				'Slots for all message types exist, with default being the fallback',
+			scope: {
+				custom: { description: 'Custom data object', type: 'object' },
+				delete: { description: 'Deletes the toast', type: 'function' },
+				duration: {
+					description:
+						'Total toasting duration in ms, null for persistent toasts',
+					type: 'integer',
+				},
+				header: { description: 'Optional header text', type: 'string' },
+				progress: { description: 'Lifecycle progress (0–1)', type: 'float' },
+				text: { description: 'Main text content', type: 'string' },
+				type: { description: 'Toast type', type: 'string' },
+			},
+		},
+	},
+	typeScript: {
+		namespace: 'KottiToaster',
+		schema: KottiToaster.propsSchema,
+	},
+})
+
+export const KtToast = attachMeta(makeInstallable(KtToastVue), {
+	addedVersion: '8.0.0',
+	deprecated: null,
+	designs: {
+		type: MetaDesignType.FIGMA,
+		url: 'https://www.figma.com/design/0yFVivSWXgFf2ddEF92zkf/Kotti-Design-System?node-id=6671-10835',
+	},
+	slots: {
+		actions: {
+			description:
+				'Used to put e.g. buttons or other interactive elements at the bottom of the toast',
+			scope: null,
+		},
+		header: {
+			description: 'Used to replace the optional header text',
+			scope: null,
+		},
+		text: {
+			description: 'Used to replace the main text',
+			scope: null,
+		},
+	},
+	typeScript: {
+		namespace: 'KottiToast',
+		schema: KottiToast.propsSchema,
 	},
-	slots: {},
-	typeScript: null,
 })
diff --git a/packages/kotti-ui/source/kotti-toaster/types.ts b/packages/kotti-ui/source/kotti-toaster/types.ts
new file mode 100644
index 0000000000..abd5578139
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-toaster/types.ts
@@ -0,0 +1,34 @@
+import { z } from 'zod'
+
+import { KottiBanner } from '../kotti-banner/types'
+
+export module KottiToaster {
+	export const propsSchema = z.object({
+		toaster: z.object({
+			_internal_pls_dont_touch: z.object({}).passthrough(),
+			abort: z.function(),
+			show: z.function(),
+			withOptions: z.function(),
+		}),
+	})
+
+	export type Props = z.input<typeof propsSchema>
+	export type PropsInternal = z.output<typeof propsSchema>
+}
+
+export module KottiToast {
+	export const propsSchema = z.object({
+		header: z.string().nullable().default(null),
+		progress: z.number().int().finite().positive().nullable().default(null),
+		text: z.string().nullable().default(null),
+		type: z
+			.union([
+				KottiBanner.styleSchema,
+				z.enum(['error', 'info', 'success', 'warning']),
+			])
+			.default('info'),
+	})
+
+	export type Props = z.input<typeof propsSchema>
+	export type PropsInternal = z.output<typeof propsSchema>
+}
diff --git a/packages/kotti-ui/source/kotti-toaster/utilities.js b/packages/kotti-ui/source/kotti-toaster/utilities.js
deleted file mode 100644
index 3dec4101e5..0000000000
--- a/packages/kotti-ui/source/kotti-toaster/utilities.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/* eslint-disable no-magic-numbers */
-/**
- * @description generates a random id
- * @param {Number} ID_BITS id entropy in bits, defaults to 64 (4 words)
- * @returns {String} random id
- */
-export const generateId = (ID_BITS = 64) => {
-	const randomWord = () =>
-		Math.floor((1 + Math.random()) * 0x10000)
-			.toString(16)
-			.substring(1)
-
-	const result = []
-
-	for (let i = 0; i < ID_BITS; i += 16) result.push(randomWord())
-
-	return result.join('')
-}
-
-/**
- * @description curried function that filters all ids that don't match a given id
- * @param {String} $0.id first id
- * @returns {Function} compares id1 to passed id
- */
-export const notId =
-	({ id: id1 }) =>
-	({ id: id2 }) =>
-		id1 !== id2
diff --git a/packages/kotti-ui/source/locales/input.json b/packages/kotti-ui/source/locales/input.json
index 07acefe9b4..b4b77870d3 100644
--- a/packages/kotti-ui/source/locales/input.json
+++ b/packages/kotti-ui/source/locales/input.json
@@ -9,10 +9,6 @@
 		"lessThanOrEqual": "is less than or equal to",
 		"restrictedAccess": "Restricted access"
 	},
-	"ktBanner": {
-		"expandCloseLabel": "Close",
-		"expandLabel": "View"
-	},
 	"ktComment": {
 		"cancelMessage": "Press Esc key or",
 		"clickToCancelLabel": "click to cancel",
diff --git a/packages/kotti-ui/source/types/kotti.ts b/packages/kotti-ui/source/types/kotti.ts
index 4c5a3d3f68..e4b6734984 100644
--- a/packages/kotti-ui/source/types/kotti.ts
+++ b/packages/kotti-ui/source/types/kotti.ts
@@ -67,6 +67,10 @@ export { KottiPopover as Popover } from '../kotti-popover/types'
 export { KottiRow as Row } from '../kotti-row/types'
 export { KottiTableLegacy as TableLegacy } from '../kotti-table-legacy/types'
 export { KottiTag as Tag } from '../kotti-tag/types'
+export {
+	KottiToast as Toast,
+	KottiToaster as Toaster,
+} from '../kotti-toaster/types'
 export { KottiUserMenu as UserMenu } from '../kotti-user-menu/types'
 export { KottiValueLabel as ValueLabel } from '../kotti-value-label/types'
 export * from './decimal-separator'
@@ -103,7 +107,7 @@ export type Meta = {
 				string,
 				{
 					description: string | null
-					type: 'function' | 'integer' | 'object'
+					type: 'float' | 'function' | 'integer' | 'object' | 'string'
 				}
 			> | null
 		}
diff --git a/packages/kotti-ui/source/utilities.ts b/packages/kotti-ui/source/utilities.ts
index c0a8185ca8..1450ed8d59 100644
--- a/packages/kotti-ui/source/utilities.ts
+++ b/packages/kotti-ui/source/utilities.ts
@@ -15,10 +15,6 @@ export const attachMeta = <C extends ComponentPublicInstanceConstructor, T>(
 ): C & { meta: Kotti.Meta & T } =>
 	Object.assign(component, { meta: Object.assign({}, meta, other) })
 
-export const isBrowser = Boolean(
-	typeof window !== 'undefined' && window.document,
-)
-
 /**
  * Checks if the given HTML element, or any of its children, is in focus
  * @param element The HTML element
diff --git a/packages/kotti-ui/tokens/colors.js b/packages/kotti-ui/tokens/colors.js
index 3cbada57fc..182805f58e 100644
--- a/packages/kotti-ui/tokens/colors.js
+++ b/packages/kotti-ui/tokens/colors.js
@@ -4,9 +4,19 @@
 // The tokens are defined with these base colors
 
 export const baseColors = {
-	white: '#FFF',
 	black: '#000',
+	'blue-10': '#EAF0FA',
+	'blue-100': '#0D244A',
+	'blue-20': '#C1D7FB',
+	'blue-30': '#AFC5E8',
+	'blue-40': '#6795E0',
+	'blue-50': '#3173DE',
+	'blue-60': '#2C66C4',
+	'blue-70': '#2659AB',
+	'blue-80': '#1F55AD',
+	'blue-90': '#153C7A',
 	'gray-10': '#F8F8F8',
+	'gray-100': '#141414',
 	'gray-20': '#E0E0E0',
 	'gray-30': '#C6C6C6',
 	'gray-40': '#A8A8A8',
@@ -15,8 +25,18 @@ export const baseColors = {
 	'gray-70': '#525252',
 	'gray-80': '#393939',
 	'gray-90': '#262626',
-	'gray-100': '#141414',
+	'green-10': '#E6F8D2',
+	'green-20': '#C4E0A5',
+	'green-50': '#71C716',
+	'green-60': '#64AD13',
+	'green-70': '#549410',
+	'orange-10': '#FDE2CB',
+	'orange-20': '#FAB980',
+	'orange-50': '#FF9333',
+	'orange-60': '#FF7800',
+	'orange-70': '#BA6820',
 	'primary-10': '#EAF0FA',
+	'primary-100': '#0D244A',
 	'primary-20': '#C1D7FB',
 	'primary-30': '#AFC5E8',
 	'primary-40': '#6795E0',
@@ -25,27 +45,20 @@ export const baseColors = {
 	'primary-70': '#2659AB',
 	'primary-80': '#1F55AD',
 	'primary-90': '#153C7A',
-	'primary-100': '#0D244A',
-	'green-20': '#C4E0A5',
-	'green-50': '#71C716',
-	'green-60': '#64AD13',
-	'green-70': '#549410',
-	'red-20': '#F0A8A8',
-	'red-50': '#F21D1D',
-	'red-60': '#D91919',
-	'red-70': '#BF1717',
 	'purple-20': '#B995CA',
 	'purple-50': '#932DC2',
 	'purple-60': '#6C218F',
 	'purple-70': '#591B75',
+	'red-10': '#FBE1E1',
+	'red-20': '#F0A8A8',
+	'red-50': '#F21D1D',
+	'red-60': '#D91919',
+	'red-70': '#BF1717',
+	white: '#FFF',
 	'yellow-20': '#FFF9C0',
 	'yellow-50': '#FFF490',
 	'yellow-60': '#FFE60D',
 	'yellow-70': '#DFC903',
-	'orange-20': '#FAB980',
-	'orange-50': '#FF9333',
-	'orange-60': '#FF7800',
-	'orange-70': '#BA6820',
 }
 
 // Tokens are calling base colors
@@ -196,6 +209,11 @@ export const tokens = [
 		description: 'Error',
 		reference: 'red-50',
 	},
+	{
+		name: 'support-error-bg',
+		description: 'Error Background',
+		reference: 'red-10',
+	},
 	{
 		name: 'support-error-dark',
 		description: 'Error dark',
@@ -211,6 +229,11 @@ export const tokens = [
 		description: 'Warning',
 		reference: 'orange-50',
 	},
+	{
+		name: 'support-warning-bg',
+		description: 'Warning Background',
+		reference: 'orange-10',
+	},
 	{
 		name: 'support-warning-dark',
 		description: 'Warning dark',
@@ -226,6 +249,11 @@ export const tokens = [
 		description: 'Success',
 		reference: 'green-50',
 	},
+	{
+		name: 'support-success-bg',
+		description: 'Success Background',
+		reference: 'green-10',
+	},
 	{
 		name: 'support-success-dark',
 		description: 'Success dark',
@@ -239,16 +267,21 @@ export const tokens = [
 	{
 		name: 'support-info',
 		description: 'Information',
-		reference: 'primary-50',
+		reference: 'blue-50',
+	},
+	{
+		name: 'support-info-bg',
+		description: 'Information Background',
+		reference: 'blue-10',
 	},
 	{
 		name: 'support-info-dark',
 		description: 'Information dark',
-		reference: 'primary-70',
+		reference: 'blue-70',
 	},
 	{
 		name: 'support-info-light',
 		description: 'Information light',
-		reference: 'primary-20',
+		reference: 'blue-20',
 	},
 ]
diff --git a/packages/kotti-ui/tokens/generate.js b/packages/kotti-ui/tokens/generate.js
index 0e6658ee55..c2c4151e43 100644
--- a/packages/kotti-ui/tokens/generate.js
+++ b/packages/kotti-ui/tokens/generate.js
@@ -11,9 +11,9 @@ const output = `
 	Run \`yarn workspace @3yourmind/kotti-ui run build:tokens\` to regenerate it
 */
 
-:root{
-	${arrayToCustomProperties(objectToArray(baseColors), 'color')}
-	${arrayToCustomProperties(tokens)}
+:root {
+${arrayToCustomProperties(objectToArray(baseColors), 'color')}
+${arrayToCustomProperties(tokens)}
 }`
 
 // Write it
diff --git a/packages/kotti-ui/tokens/utilities.js b/packages/kotti-ui/tokens/utilities.js
index 53cf01ca63..0d6ce91fb4 100644
--- a/packages/kotti-ui/tokens/utilities.js
+++ b/packages/kotti-ui/tokens/utilities.js
@@ -2,7 +2,7 @@ export const arrayToCustomProperties = (colors, type = 'reference') =>
 	colors
 		.map(
 			(color) =>
-				`--${color.name}: ${
+				`\t--${color.name}: ${
 					type === 'reference' ? `var(--${color.reference})` : color.value
 				};`,
 		)
diff --git a/packages/vue-project/src/App.vue b/packages/vue-project/src/App.vue
deleted file mode 100644
index f1656570e9..0000000000
--- a/packages/vue-project/src/App.vue
+++ /dev/null
@@ -1,218 +0,0 @@
-<script setup lang="ts">
-import '@3yourmind/kotti-ui/dist/style.css'
-import '@3yourmind/yoco/style.css'
-
-import {
-	KtButton,
-	KtFieldDate,
-	KtFieldText,
-	KtFieldToggle,
-	KtForm,
-	KtNavbar,
-	KtActionbar,
-	KtUserMenu,
-	KtI18nContext,
-} from '@3yourmind/kotti-ui'
-import { ref } from 'vue'
-
-const alerty = (some: string) => {
-	window.alert(some)
-}
-
-const formValue = ref({
-	name: null,
-	birthday: null,
-	isNice: false,
-})
-const isNarrow = ref(false)
-</script>
-
-<template>
-	<KtI18nContext locale="en-US">
-		<div class="kt-container">
-			<KtNavbar
-				:isNarrow="isNarrow"
-				logoUrl="https://c.tenor.com/KvQWsHSsiMwAAAAC/tenor.gif"
-				:sections="[
-					{
-						title: 'Order Management',
-						links: [
-							{
-								component: 'a',
-								icon: 'invoice',
-								isActive: false,
-								props: {
-									href: '#',
-								},
-								title: 'Orders',
-							},
-							{
-								component: 'a',
-								icon: 'request',
-								isActive: false,
-								props: {
-									href: '#',
-								},
-								title: 'Quotes',
-							},
-						],
-					},
-				]"
-				@setIsNarrow="(val) => (isNarrow = val)"
-			>
-				<template #navbar-footer>
-					<KtUserMenu
-						:sections="[
-							{
-								links: [
-									{
-										component: 'a',
-										props: {
-											href: '#',
-										},
-										title: 'User Panel',
-									},
-									{
-										component: 'a',
-										props: {
-											href: '#',
-										},
-										title: 'Service Panel',
-									},
-								],
-								title: 'Switch To',
-							},
-							{
-								links: [
-									{
-										component: 'a',
-										props: {
-											href: '#',
-										},
-										title: '2YOURMIND Service',
-									},
-									{
-										component: 'a',
-										props: {
-											href: '#',
-										},
-										title: '3YOURMIND Service',
-									},
-									{
-										component: 'a',
-										props: {
-											href: '#',
-										},
-										title: '4YOURMIND Service',
-									},
-								],
-								title: 'Recent Service',
-							},
-							{
-								links: [
-									{
-										component: 'a',
-										props: {
-											href: '#',
-										},
-										title: 'Settings',
-									},
-									{
-										component: 'nuxt-link',
-										props: {
-											to: '/usage/layouts/navbar',
-										},
-										title: 'Logout (Close Example)',
-									},
-								],
-								title: null,
-							},
-						]"
-						userName="Jony'O Five"
-						userStatus="Invisible"
-					/>
-				</template>
-			</KtNavbar>
-			<KtActionbar
-				slot="actionbar"
-				headerTitle="KtContainer Example"
-				:menu="[
-					{
-						label: 'First Link',
-						to: '/examples/layouts',
-						icon: 'user',
-						active: false,
-						disabled: false,
-					},
-					{
-						label: 'Second Link',
-						to: 'https://google.com',
-						icon: 'basket',
-						active: true,
-						disabled: false,
-					},
-					{
-						label: 'Third Link',
-						to: '/',
-						icon: 'bell',
-						active: false,
-						disabled: true,
-					},
-				]"
-			/>
-			<main class="workspace">
-				<KtButton label="hello" type="primary" @click="() => alerty('hello')" />
-				<KtForm v-model:value="formValue">
-					<KtFieldText formKey="name" label="name">
-						<template #helpText>
-							<strong> Let me help you </strong>
-						</template>
-					</KtFieldText>
-					<KtFieldDate formKey="birthday" label="birthday">
-						<template #helpText>
-							<strong> Let me help you </strong>
-						</template>
-					</KtFieldDate>
-					<KtFieldToggle formKey="isNice" label="toggle">
-						<template #helpText>
-							<strong> Let me help you </strong>
-						</template>
-					</KtFieldToggle>
-				</KtForm>
-			</main>
-		</div> </KtI18nContext
-	>locale
-</template>
-
-<style scoped>
-main {
-	padding: 80px;
-}
-
-/* header {
-	line-height: 1.5;
-}
-
-.logo {
-	display: block;
-	margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-	header {
-		display: flex;
-		place-items: center;
-		padding-right: calc(var(--section-gap) / 2);
-	}
-
-	.logo {
-		margin: 0 2rem 0 0;
-	}
-
-	header .wrapper {
-		display: flex;
-		place-items: flex-start;
-		flex-wrap: wrap;
-	}
-} */
-</style>
diff --git a/yarn.lock b/yarn.lock
index 77677aed5b..01aeab5f80 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10237,16 +10237,16 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.18.0.tgz#26a6faae7ffbeb293a39660e88a76b82e30b7554"
   integrity sha512-W7tfG7vMOGtD30sHoZSSc/JVYiyDPEyQVso/Zz+/uQd0B0L46gtC+pHha5FFMRpil6fm/AoEcRWyOVi4+E/f8w==
 
+nanoid@3.x, nanoid@^3.1.23, nanoid@^3.3.7:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
+  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
+
 nanoid@^2.1.0:
   version "2.1.11"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
   integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==
 
-nanoid@^3.1.23, nanoid@^3.3.7:
-  version "3.3.7"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
-  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
-
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -14654,6 +14654,11 @@ ts-api-utils@^1.3.0:
   resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.3.0.tgz#4b490e27129f1e8e686b45cc4ab63714dc60eea1"
   integrity sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==
 
+ts-dedent@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.2.0.tgz#39e4bd297cd036292ae2394eb3412be63f563bb5"
+  integrity sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==
+
 ts-loader@8.x, ts-loader@^8.0.17:
   version "8.4.0"
   resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-8.4.0.tgz#e845ea0f38d140bdc3d7d60293ca18d12ff2720f"