diff --git a/apps/cookbook/src/app/examples/modal-example/_modal-playground.shared.scss b/apps/cookbook/src/app/examples/_modal-playground.shared.scss
similarity index 100%
rename from apps/cookbook/src/app/examples/modal-example/_modal-playground.shared.scss
rename to apps/cookbook/src/app/examples/_modal-playground.shared.scss
diff --git a/apps/cookbook/src/app/examples/examples.routes.ts b/apps/cookbook/src/app/examples/examples.routes.ts
index 11ea8db138..432eca42aa 100644
--- a/apps/cookbook/src/app/examples/examples.routes.ts
+++ b/apps/cookbook/src/app/examples/examples.routes.ts
@@ -347,6 +347,10 @@ export const EXAMPLE_ROUTES: ModalEnabledRoutes = [
           },
         ],
       },
+      {
+        path: 'toast',
+        component: ToastExampleComponent,
+      },
     ],
   },
   {
@@ -512,10 +516,6 @@ export const EXAMPLE_ROUTES: ModalEnabledRoutes = [
     path: 'checkbox',
     component: CheckboxExampleComponent,
   },
-  {
-    path: 'toast',
-    component: ToastExampleComponent,
-  },
   {
     path: 'toggle',
     component: ToggleExampleComponent,
diff --git a/apps/cookbook/src/app/examples/modal-example/modal-component-example.component.scss b/apps/cookbook/src/app/examples/modal-example/modal-component-example.component.scss
index 95619893a1..f15ef5ac58 100644
--- a/apps/cookbook/src/app/examples/modal-example/modal-component-example.component.scss
+++ b/apps/cookbook/src/app/examples/modal-example/modal-component-example.component.scss
@@ -1,6 +1,6 @@
 @use '@kirbydesign/core/src/scss/utils';
 @use '../examples.shared';
-@use 'modal-playground.shared';
+@use '../modal-playground.shared';
 
 kirby-card {
   margin-top: utils.size('l');
diff --git a/apps/cookbook/src/app/examples/modal-example/modal-example-advanced.component.scss b/apps/cookbook/src/app/examples/modal-example/modal-example-advanced.component.scss
index cac37d37f3..d7a715eaec 100644
--- a/apps/cookbook/src/app/examples/modal-example/modal-example-advanced.component.scss
+++ b/apps/cookbook/src/app/examples/modal-example/modal-example-advanced.component.scss
@@ -1,6 +1,6 @@
 @use '@kirbydesign/core/src/scss/utils';
 @use '../examples.shared';
-@use 'modal-playground.shared';
+@use '../modal-playground.shared';
 
 kirby-card {
   --kirby-card-width: fit-content;
diff --git a/apps/cookbook/src/app/examples/modal-example/modal-example-outlet.component.scss b/apps/cookbook/src/app/examples/modal-example/modal-example-outlet.component.scss
index c2933701d4..e358d07858 100644
--- a/apps/cookbook/src/app/examples/modal-example/modal-example-outlet.component.scss
+++ b/apps/cookbook/src/app/examples/modal-example/modal-example-outlet.component.scss
@@ -1,2 +1,2 @@
 @use '../examples.shared';
-@use 'modal-playground.shared';
+@use '../modal-playground.shared';
diff --git a/apps/cookbook/src/app/examples/modal-example/modal-example-simple.component.scss b/apps/cookbook/src/app/examples/modal-example/modal-example-simple.component.scss
index 95619893a1..f15ef5ac58 100644
--- a/apps/cookbook/src/app/examples/modal-example/modal-example-simple.component.scss
+++ b/apps/cookbook/src/app/examples/modal-example/modal-example-simple.component.scss
@@ -1,6 +1,6 @@
 @use '@kirbydesign/core/src/scss/utils';
 @use '../examples.shared';
-@use 'modal-playground.shared';
+@use '../modal-playground.shared';
 
 kirby-card {
   margin-top: utils.size('l');
diff --git a/apps/cookbook/src/app/examples/toast-example/toast-example.component.html b/apps/cookbook/src/app/examples/toast-example/toast-example.component.html
index adcf4fec4f..73ba05b1cf 100644
--- a/apps/cookbook/src/app/examples/toast-example/toast-example.component.html
+++ b/apps/cookbook/src/app/examples/toast-example/toast-example.component.html
@@ -1,3 +1,2 @@
-<button kirby-button (click)="showToast()">Show default toast (success)</button>
-<button kirby-button (click)="showToast('success')">Show toast (success)</button>
-<button kirby-button (click)="showToast('warning')">Show toast (warning)</button>
+<button kirby-button (click)="showToast()">Show success toast (default)</button>
+<button kirby-button (click)="showToast('warning')">Show warning toast</button>
diff --git a/apps/cookbook/src/app/examples/toast-example/toast-example.component.ts b/apps/cookbook/src/app/examples/toast-example/toast-example.component.ts
index 340c2a1cc5..8c02f51f7e 100644
--- a/apps/cookbook/src/app/examples/toast-example/toast-example.component.ts
+++ b/apps/cookbook/src/app/examples/toast-example/toast-example.component.ts
@@ -1,19 +1,40 @@
 import { Component } from '@angular/core';
-
-import { MessageType, ToastConfig } from '@kirbydesign/designsystem';
-import { ToastController } from '@kirbydesign/designsystem';
 import { ButtonComponent } from '@kirbydesign/designsystem/button';
+import { MessageType, ToastConfig, ToastController } from '@kirbydesign/designsystem/toast';
+
+const ts = `showToast(messageType?: MessageType) {
+  const message =
+    messageType === 'warning' ? 'Your warning toast message' : 'Your successful toast message';
+  
+  const config: ToastConfig = {
+    message,
+    messageType,
+    durationInMs: 5000,
+  };
+  this.toastController.showToast(config, this.onToastClosed);
+}
+
+private onToastClosed() {
+  console.log(\`Toast closed\`);
+}`;
 
 @Component({
   selector: 'cookbook-toast-example',
   templateUrl: './toast-example.component.html',
+  styleUrls: ['../_examples.shared.scss', '../_modal-playground.shared.scss'],
   imports: [ButtonComponent],
 })
 export class ToastExampleComponent {
+  static readonly ts = ts;
+
   constructor(public toastController: ToastController) {}
+
   showToast(messageType?: MessageType) {
+    const message =
+      messageType === 'warning' ? 'Your warning toast message' : 'Your successful toast message';
+
     const config: ToastConfig = {
-      message: 'Your toast message',
+      message,
       messageType,
       durationInMs: 5000,
     };
diff --git a/apps/cookbook/src/app/showcase/modal-showcase/modal-showcase.component.html b/apps/cookbook/src/app/showcase/modal-showcase/modal-showcase.component.html
index 106fa9f3f7..24be0c7050 100644
--- a/apps/cookbook/src/app/showcase/modal-showcase/modal-showcase.component.html
+++ b/apps/cookbook/src/app/showcase/modal-showcase/modal-showcase.component.html
@@ -89,7 +89,7 @@ <h3 #componentBased>Using the Modal Component</h3>
   class="large-example"
   src="/examples/modal-component"
   viewMode="full-size"
-  [showViewModeToggle]="true"
+  showViewModeToggle="true"
   showExternalLink="true"
 ></cookbook-iphone>
 <cookbook-example-viewer [html]="componentExample.template"></cookbook-example-viewer>
diff --git a/apps/cookbook/src/app/showcase/toast-showcase/toast-showcase.component.html b/apps/cookbook/src/app/showcase/toast-showcase/toast-showcase.component.html
index 2d0c72f0a0..5349dcddbd 100644
--- a/apps/cookbook/src/app/showcase/toast-showcase/toast-showcase.component.html
+++ b/apps/cookbook/src/app/showcase/toast-showcase/toast-showcase.component.html
@@ -1,31 +1,40 @@
 <div class="example">
-  <cookbook-toast-example></cookbook-toast-example>
-  <cookbook-code-viewer [html]="exampleHtml"></cookbook-code-viewer>
-  To show the toast, create a
-  <code>ToastConfig</code>
-  and pass it to
-  <code>toastController.showToast</code>
+  <p>
+    Toasts are the most subtle 'notification' available in Kirby. These messages give users
+    immediate feedback after taking an action. Users don't need to dismiss toast messages, as they
+    appear only for a moment before they disappear.
+  </p>
+  <p>There are two types of toasts:</p>
+
+  <ul>
+    <li>Success is used for confirmations on an action</li>
+    <li>Warning is used for warnings, eg. something the user should be aware of</li>
+  </ul>
+
+  <cookbook-iphone
+    src="/examples/toast"
+    showExternalLink="true"
+    viewMode="full-size"
+    showViewModeToggle="true"
+  ></cookbook-iphone>
 
   <!-- prettier-ignore -->
-  <cookbook-code-viewer language="ts">const config: ToastConfig =
-      <pre>{{ '{' }}
-  message: 'Your toast message',
-  messageType: 'success',
-  durationInMs: 5000,
-{{ '}' }};
-this.toastController.showToast(config);
-</pre>
-    </cookbook-code-viewer>
-  (Optional) if you need to know when the toast is dismissed, you can pass a callback function:
+  <cookbook-example-viewer [ts]="toastExample.ts"></cookbook-example-viewer>
+  <h4>Callback</h4>
+  If you need to know when the toast is dismissed, you can pass a callback function:
   <!-- prettier-ignore -->
   <cookbook-code-viewer language="ts">this.toastController.showToast(config, myCallback);</cookbook-code-viewer>
-  where
-  <code>myCallback</code>
-  can be e.g.:
-  <!-- prettier-ignore -->
-  <cookbook-code-viewer language="ts">myCallback() {{ '{' }}
-...
-{{ '}' }}</cookbook-code-viewer>
+
+  <h3>Best Practice</h3>
+  <ul>
+    <li>Use a toast when it's not critical for the user to read the message.</li>
+    <li>
+      If you don't have clear instructions and/or the user can find the given information in the
+      screen shown.
+    </li>
+    <li>Keep the amount of text below 1 line.</li>
+  </ul>
+
   <h4>Toast config properties:</h4>
   <cookbook-api-description-properties
     [properties]="properties"
diff --git a/apps/cookbook/src/app/showcase/toast-showcase/toast-showcase.component.scss b/apps/cookbook/src/app/showcase/toast-showcase/toast-showcase.component.scss
new file mode 100644
index 0000000000..bd90b7e9ad
--- /dev/null
+++ b/apps/cookbook/src/app/showcase/toast-showcase/toast-showcase.component.scss
@@ -0,0 +1,2 @@
+@use '../showcase.shared';
+@use '@kirbydesign/core/src/scss/utils';
diff --git a/apps/cookbook/src/app/showcase/toast-showcase/toast-showcase.component.ts b/apps/cookbook/src/app/showcase/toast-showcase/toast-showcase.component.ts
index 6bf8532097..971c50e557 100644
--- a/apps/cookbook/src/app/showcase/toast-showcase/toast-showcase.component.ts
+++ b/apps/cookbook/src/app/showcase/toast-showcase/toast-showcase.component.ts
@@ -1,17 +1,26 @@
 import { Component } from '@angular/core';
-import exampleHtml from '../../examples/toast-example/toast-example.component.html?raw';
-import { ToastExampleComponent } from '../../examples/toast-example/toast-example.component';
 import { CodeViewerComponent } from '../../shared/code-viewer/code-viewer.component';
 import { ApiDescriptionPropertiesComponent } from '../../shared/api-description/api-description-properties/api-description-properties.component';
+import { ExampleViewerComponent } from '~/app/shared/example-viewer/example-viewer.component';
 import { ApiDescriptionProperty } from '~/app/shared/api-description/api-description-properties/api-description-properties.component';
+import { IphoneComponent } from '~/app/iphone/iphone.component';
+import { ToastExampleComponent } from '~/app/examples/toast-example/toast-example.component';
 
 @Component({
   selector: 'cookbook-toast-showcase',
   templateUrl: './toast-showcase.component.html',
-  imports: [ToastExampleComponent, CodeViewerComponent, ApiDescriptionPropertiesComponent],
+  styleUrl: './toast-showcase.component.scss',
+  imports: [
+    ToastExampleComponent,
+    CodeViewerComponent,
+    ExampleViewerComponent,
+    ApiDescriptionPropertiesComponent,
+    IphoneComponent,
+  ],
 })
 export class ToastShowcaseComponent {
-  exampleHtml = exampleHtml;
+  toastExample = ToastExampleComponent;
+
   properties: ApiDescriptionProperty[] = [
     {
       name: 'message',