diff --git a/.changeset/red-onions-dance.md b/.changeset/red-onions-dance.md
new file mode 100644
index 0000000000..bee3248eb4
--- /dev/null
+++ b/.changeset/red-onions-dance.md
@@ -0,0 +1,7 @@
+---
+"pie-docs": patch
+"@justeattakeaway/pie-toast": patch
+"pie-storybook": patch
+---
+
+[Changed] - Complete the toast code page
diff --git a/apps/pie-docs/src/components/toast/code/code.md b/apps/pie-docs/src/components/toast/code/code.md
new file mode 100644
index 0000000000..e3b6bc9f42
--- /dev/null
+++ b/apps/pie-docs/src/components/toast/code/code.md
@@ -0,0 +1,124 @@
+---
+eleventyNavigation:
+ key: Code
+ parent: Toast
+ order: 3
+shouldShowContents: true
+eleventyComputed:
+ props: "{% include './props.json' %}"
+ events: "{% include './events.json' %}"
+---
+
+## Overview
+
+
+
+ 
+
+
+
+ 
+
+
+
+`pie-toast` is a Web Component built using [Lit](https://lit.dev/). It offers a simple and accessible toast component for web applications.
+
+This component can be easily integrated into various frontend frameworks and customised through a set of properties.
+
+{% notification {
+ type: "information",
+ iconName: "engineers",
+ message: "You can try out this component on our [Storybook](https://webc.pie.design/?path=/docs/toast) instance!"
+} %}
+
+## Installation
+
+To install `pie-toast` in your application, run the following on your command line:
+
+```shell
+npm i @justeattakeaway/pie-webc
+```
+
+```shell
+yarn add @justeattakeaway/pie-webc
+```
+
+{% notification {
+ type: "neutral",
+ iconName: "link",
+ message: "For more information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components)."
+} %}
+
+## Props
+
+{% componentDetailsTable {
+ tableData: props
+} %}
+
+## Events
+
+{% componentDetailsTable {
+ tableData: events
+} %}
+
+## Examples
+
+For HTML:
+
+```js
+// import as module into a js file e.g. main.js
+import '@justeattakeaway/pie-webc/components/toast.js'
+```
+
+```html
+
+
+
+```
+
+For Native JS Applications, Vue, Angular, Svelte etc.:
+
+```js
+// Vue templates (using Nuxt 3)
+import '@justeattakeaway/pie-webc/components/toast.js';
+
+
+```
+
+By default, the toast will auto-dismiss in five seconds. To disable the auto-dismiss functionality, you must set the duration to `null`.
+
+```js
+// Vue templates (using Nuxt 3)
+import '@justeattakeaway/pie-webc/components/toast.js';
+
+
+```
+
+For React Applications:
+
+```jsx
+import { PieToast } from '@justeattakeaway/pie-webc/react/toast.js';
+
+
+```
+
+```jsx
+// React templates (using Next 13 and SSR)
+import { PieToast } from '@justeattakeaway/pie-toast/dist/react';
+
+
+```
+
+{% notification {
+ type: "neutral",
+ iconName: "link",
+ message: "For more examples, see [here](https://github.com/justeattakeaway/pie-aperture/tree/main)."
+} %}
+
+## Changelog
+
+{% notification {
+ type: "neutral",
+ iconName: "link",
+ message: "See [here](https://github.com/justeattakeaway/pie/blob/main/packages/components/pie-toast/CHANGELOG.md)."
+} %}
diff --git a/apps/pie-docs/src/components/toast/code/events.json b/apps/pie-docs/src/components/toast/code/events.json
new file mode 100644
index 0000000000..c1164b7426
--- /dev/null
+++ b/apps/pie-docs/src/components/toast/code/events.json
@@ -0,0 +1,24 @@
+{
+ "headings": [
+ "Event",
+ "Type",
+ "Description"
+ ],
+ "rows": [
+ [
+ "`pie-toast-close`",
+ "`CustomEvent`",
+ "Triggered when the user interacts with the close icon or when the toast auto dismiss."
+ ],
+ [
+ "`pie-toast-open`",
+ "`CustomEvent`",
+ "Triggered when the toast is opened."
+ ],
+ [
+ "`pie-toast-leading-action-click`",
+ "`CustomEvent`",
+ "Triggered when the user interacts with the leading action."
+ ]
+ ]
+}
diff --git a/apps/pie-docs/src/components/toast/code/props.json b/apps/pie-docs/src/components/toast/code/props.json
new file mode 100644
index 0000000000..4c1d6ed330
--- /dev/null
+++ b/apps/pie-docs/src/components/toast/code/props.json
@@ -0,0 +1,103 @@
+{
+ "headings": ["Prop", "Options", "Description", "Default"],
+ "rows": [
+ [
+ "isOpen",
+ {
+ "type": "code",
+ "item": ["true", "false"]
+ },
+ "When true, the toast is set to be open and visible.",
+ {
+ "type": "code",
+ "item": ["false"]
+ }
+ ],
+ [
+ "variant",
+ {
+ "type": "code",
+ "item": ["\"neutral\"", "\"info\"", "\"warning\"", "\"success\"", "\"error\""]
+ },
+ "Sets the variant of the toast.",
+ {
+ "type": "code",
+ "item": ["\"neutral\""]
+ }
+ ],
+ [
+ "isStrong",
+ {
+ "type": "code",
+ "item": ["true", "false"]
+ },
+ "When true, the toast is displayed with a strong visual style.",
+ {
+ "type": "code",
+ "item": ["false"]
+ }
+ ],
+ [
+ "isDismissible",
+ {
+ "type": "code",
+ "item": ["true", "false"]
+ },
+ "When true, allows dismissing the toast by clicking on the close button.",
+ {
+ "type": "code",
+ "item": ["false"]
+ }
+ ],
+ [
+ "message",
+ {
+ "type": "code",
+ "item": ["string"]
+ },
+ "The message content of the toast.",
+ {
+ "type": "code",
+ "item": ["\"\""]
+ }
+ ],
+ [
+ "isMultiline",
+ {
+ "type": "code",
+ "item": ["true", "false"]
+ },
+ "Allows the message content to be displayed as multiline, limited to three rows.",
+ {
+ "type": "code",
+ "item": ["false"]
+ }
+ ],
+ [
+ "leadingAction",
+ {
+ "type": "code",
+ "item": ["{ text: string, ariaLabel?: string }"]
+ },
+ "The leading action for the toast.",
+ {
+ "type": "code",
+ "item": ["undefined"]
+ }
+ ],
+ [
+ "duration",
+ {
+ "type": "code",
+ "item": ["number", "null"]
+ },
+ "Sets the duration of the toast in milliseconds before it auto-dismisses. If the value is `null`, auto-dismiss is disabled. If the value is not provided it auto-dismisses after 5 seconds.",
+ {
+ "type": "code",
+ "item": ["5000"]
+ }
+ ]
+ ]
+}
+
+
diff --git a/apps/pie-docs/test/snapshots/expected-routes.snapshot.json b/apps/pie-docs/test/snapshots/expected-routes.snapshot.json
index 3e7b46be8e..7799f0f6aa 100644
--- a/apps/pie-docs/test/snapshots/expected-routes.snapshot.json
+++ b/apps/pie-docs/test/snapshots/expected-routes.snapshot.json
@@ -80,6 +80,7 @@
"components/textarea/code",
"components/thumbnail",
"components/toast",
+ "components/toast/code",
"components/toast/motion",
"components/tooltip",
"components/uploader",
diff --git a/apps/pie-storybook/stories/pie-toast.stories.ts b/apps/pie-storybook/stories/pie-toast.stories.ts
index 886f5f4a2f..965bb4d0ca 100644
--- a/apps/pie-storybook/stories/pie-toast.stories.ts
+++ b/apps/pie-storybook/stories/pie-toast.stories.ts
@@ -57,7 +57,7 @@ const toastStoryMeta: ToastStoryMeta = {
control: 'text',
},
isMultiline: {
- description: 'It allows the message content being displayed as multiline limited to three rows.',
+ description: 'Allows the message content to be displayed as multiline, limited to three rows.',
control: 'boolean',
defaultValue: {
summary: defaultProps.isOpen,
diff --git a/packages/components/pie-toast/src/defs.ts b/packages/components/pie-toast/src/defs.ts
index ffa0634310..ba55291979 100644
--- a/packages/components/pie-toast/src/defs.ts
+++ b/packages/components/pie-toast/src/defs.ts
@@ -37,7 +37,7 @@ export interface ToastProps {
*/
message: string;
/**
- * It allows the message content being displayed as multiline limited to three rows.
+ * Allows the message content to be displayed as multiline, limited to three rows.
*/
isMultiline?: boolean;
/**
@@ -48,7 +48,7 @@ export interface ToastProps {
/**
* Sets the duration of the toast in milliseconds before it auto-dismisses.
* If the value is null auto-dismiss is disabled
- * If the value is not provided it auto-dismisses after 5 seconds (5000 milliseconds)
+ * If the value is not provided it auto-dismisses after 5 seconds
*/
duration?: number | null;
}