diff --git a/docs/api/toast.md b/docs/api/toast.md
index 8d3c0ba3a4c..bf74e97cdd6 100644
--- a/docs/api/toast.md
+++ b/docs/api/toast.md
@@ -55,12 +55,19 @@ The following example demonstrates how to use the `buttons` property to add a bu
import ButtonsPlayground from '@site/static/usage/v7/toast/buttons/index.md';
-
## Positioning
Toasts can be positioned at the top, bottom or middle of the viewport. The position can be passed upon creation. The possible values are `top`, `bottom` and `middle`. If the position is not specified, the toast will be displayed at the bottom of the viewport.
+## Layout
+
+Button containers within the toast can be displayed either on the same line as the message or stacked on separate lines using the `layout` property. The stacked layout should be used with buttons that have long text values. Additionally, buttons in a stacked toast layout can use a `side` value of either `start` or `end`, but not both.
+
+import StackedPlayground from '@site/static/usage/v7/toast/layout/index.md';
+
+
+
## Icons
An icon can be added next to the content inside of the toast. In general, icons in toasts should be used to add additional style or context, not to grab the user's attention or elevate the priority of the toast. If you wish to convey a higher priority message to the user or guarantee a response, we recommend using an [Alert](alert.md) instead.
diff --git a/static/usage/v6/toast/layout/angular/example_component_html.md b/static/usage/v6/toast/layout/angular/example_component_html.md
new file mode 100644
index 00000000000..8bd086f7ba5
--- /dev/null
+++ b/static/usage/v6/toast/layout/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+Open Baseline Layout Toast
+Click Stacked Layout Toast
+```
\ No newline at end of file
diff --git a/static/usage/v6/toast/layout/angular/example_component_ts.md b/static/usage/v6/toast/layout/angular/example_component_ts.md
new file mode 100644
index 00000000000..6e8c63a9b58
--- /dev/null
+++ b/static/usage/v6/toast/layout/angular/example_component_ts.md
@@ -0,0 +1,41 @@
+```ts
+import { Component } from '@angular/core';
+import { ToastController } from '@ionic/angular';
+import type { ToastOptions } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+
+ constructor(private toastController: ToastController) {}
+
+ async presentToast(opts: ToastOptions) {
+ const toast = await this.toastController.create(opts);
+
+ await toast.present();
+ }
+
+ async presentBaselineToast() {
+ await this.presentToast({
+ duration: 3000,
+ message: "This is a toast with a long message and a button that appears on the same line.",
+ buttons: [
+ { text: 'Action With Long Text'}
+ ]
+ });
+ }
+
+ async presentStackedToast() {
+ await this.presentToast({
+ duration: 3000,
+ message: "This is a toast with a long message and a button that appears on the next line.",
+ buttons: [
+ { text: 'Action With Long Text'}
+ ],
+ layout: "stacked"
+ });
+ }
+}
+```
\ No newline at end of file
diff --git a/static/usage/v6/toast/layout/demo.html b/static/usage/v6/toast/layout/demo.html
new file mode 100644
index 00000000000..dbeb624b0fb
--- /dev/null
+++ b/static/usage/v6/toast/layout/demo.html
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+ Toast
+
+
+
+
+
+
+
+
+
+
+ Toast
+
+
+
+ Open Baseline Layout Toast
+ Click Stacked Layout Toast
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v6/toast/layout/index.md b/static/usage/v6/toast/layout/index.md
new file mode 100644
index 00000000000..7f420b26af4
--- /dev/null
+++ b/static/usage/v6/toast/layout/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v6/toast/layout/javascript.md b/static/usage/v6/toast/layout/javascript.md
new file mode 100644
index 00000000000..2350799f7e1
--- /dev/null
+++ b/static/usage/v6/toast/layout/javascript.md
@@ -0,0 +1,33 @@
+```html
+Open Baseline Layout Toast
+Click Stacked Layout Toast
+
+
+```
diff --git a/static/usage/v6/toast/layout/react.md b/static/usage/v6/toast/layout/react.md
new file mode 100644
index 00000000000..68813f1eb1f
--- /dev/null
+++ b/static/usage/v6/toast/layout/react.md
@@ -0,0 +1,41 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonToast } from '@ionic/react';
+
+function Example() {
+ const [presentToast] = useIonToast();
+
+ return (
+ <>
+ {
+ presentToast({
+ duration: 3000,
+ message: "This is a toast with a long message and a button that appears on the next line.",
+ buttons: [
+ { text: 'Action With Long Text'}
+ ]
+ })
+ }}
+ >
+ Open Baseline Layout Toast
+
+ {
+ presentToast({
+ duration: 3000,
+ message: "This is a toast with a long message and a button that appears on the next line.",
+ buttons: [
+ { text: 'Action With Long Text'}
+ ],
+ layout: "stacked"
+ })
+ }}
+ >
+ Open Stacked Layout Toast
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v6/toast/layout/vue.md b/static/usage/v6/toast/layout/vue.md
new file mode 100644
index 00000000000..5b884ea7caf
--- /dev/null
+++ b/static/usage/v6/toast/layout/vue.md
@@ -0,0 +1,46 @@
+```html
+
+ Open Baseline Layout Toast
+ Click Stacked Layout Toast
+
+
+
+```
diff --git a/static/usage/v7/toast/layout/angular/example_component_html.md b/static/usage/v7/toast/layout/angular/example_component_html.md
new file mode 100644
index 00000000000..6f33423b8a5
--- /dev/null
+++ b/static/usage/v7/toast/layout/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+Open Baseline Layout Toast
+Open Stacked Layout Toast
+
+
+```
\ No newline at end of file
diff --git a/static/usage/v7/toast/layout/angular/example_component_ts.md b/static/usage/v7/toast/layout/angular/example_component_ts.md
new file mode 100644
index 00000000000..4070a210849
--- /dev/null
+++ b/static/usage/v7/toast/layout/angular/example_component_ts.md
@@ -0,0 +1,15 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ toastButtons = [
+ {
+ text: 'Action With Long Text',
+ }
+ ];
+}
+```
\ No newline at end of file
diff --git a/static/usage/v7/toast/layout/demo.html b/static/usage/v7/toast/layout/demo.html
new file mode 100644
index 00000000000..86d2dedafb4
--- /dev/null
+++ b/static/usage/v7/toast/layout/demo.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+ Toast
+
+
+
+
+
+
+
+
+
+
+ Toast
+
+
+
+ Open Baseline Layout Toast
+ Open Stacked Layout Toast
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/toast/layout/index.md b/static/usage/v7/toast/layout/index.md
new file mode 100644
index 00000000000..26d799850e4
--- /dev/null
+++ b/static/usage/v7/toast/layout/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v7/toast/layout/javascript.md b/static/usage/v7/toast/layout/javascript.md
new file mode 100644
index 00000000000..1ac30c76931
--- /dev/null
+++ b/static/usage/v7/toast/layout/javascript.md
@@ -0,0 +1,18 @@
+```html
+Open Baseline Layout Toast
+Open Stacked Layout Toast
+
+
+
+
+```
diff --git a/static/usage/v7/toast/layout/react.md b/static/usage/v7/toast/layout/react.md
new file mode 100644
index 00000000000..f760997bf69
--- /dev/null
+++ b/static/usage/v7/toast/layout/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonButton, IonToast } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Open Stacked Layout Toast
+ Open Baseline Layout Toast
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/toast/layout/vue.md b/static/usage/v7/toast/layout/vue.md
new file mode 100644
index 00000000000..bbd103574c3
--- /dev/null
+++ b/static/usage/v7/toast/layout/vue.md
@@ -0,0 +1,37 @@
+```html
+
+ Open Baseline Layout Toast
+ Open Stacked Layout Toast
+
+
+
+
+
+```
diff --git a/versioned_docs/version-v6/api/toast.md b/versioned_docs/version-v6/api/toast.md
index de515e72bbb..b0915d8cf8c 100644
--- a/versioned_docs/version-v6/api/toast.md
+++ b/versioned_docs/version-v6/api/toast.md
@@ -99,6 +99,14 @@ import ButtonsPlayground from '@site/static/usage/v6/toast/buttons/index.md';
+## Layout
+
+Button containers within the toast can be displayed either on the same line as the message or stacked on separate lines using the `layout` property. The stacked layout should be used with buttons that have long text values. Additionally, buttons in a stacked toast layout can use a `side` value of either `start` or `end`, but not both.
+
+import StackedPlayground from '@site/static/usage/v6/toast/layout/index.md';
+
+
+
## Icons
An icon can be added next to the content inside of the toast. In general, icons in toasts should be used to add additional style or context, not to grab the user's attention or elevate the priority of the toast. If you wish to convey a higher priority message to the user or guarantee a response, we recommend using an [Alert](alert.md) instead.