diff --git a/core/src/components/title/readme.md b/core/src/components/title/readme.md
index 8a86f2ec53..99766c5adc 100644
--- a/core/src/components/title/readme.md
+++ b/core/src/components/title/readme.md
@@ -60,7 +60,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
 ```html
 <ion-header translucent="true">
   <ion-toolbar>   
-    <ion-buttons collapse="true">
+    <ion-buttons collapse="true" slot="end">
       <ion-button>Click Me</ion-button>
     </ion-buttons> 
     <ion-title>Settings</ion-title>               
@@ -70,7 +70,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
 <ion-content fullscreen="true">
   <ion-header collapse="condense">              
     <ion-toolbar>      
-      <ion-buttons collapse="true">
+      <ion-buttons collapse="true" slot="end">
         <ion-button>Click Me</ion-button>
       </ion-buttons>
       <ion-title size="large">Settings</ion-title>
@@ -87,7 +87,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
 
 In this example, notice that we have added two sets of `ion-buttons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
 
-`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state.
+`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
 
 When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
 
@@ -188,7 +188,7 @@ export const LargeTitleExample: React.FC = () => (
   <>
     <IonHeader translucent="true">
       <IonToolbar>   
-        <IonButtons collapse="true">
+        <IonButtons collapse="true" slot="end">
           <IonButton>Click Me</IonButton>
         </IonButtons> 
         <IonTitle>Settings</IonTitle>               
@@ -198,7 +198,7 @@ export const LargeTitleExample: React.FC = () => (
     <IonContent fullscreen="true">
       <IonHeader collapse="condense">              
         <IonToolbar>      
-          <IonButtons collapse="true">
+          <IonButtons collapse="true" slot="end">
             <IonButton>Click Me</IonButton>
           </IonButtons>
           <IonTitle size="large">Settings</IonTitle>
@@ -217,7 +217,7 @@ export const LargeTitleExample: React.FC = () => (
 
 In this example, notice that we have added two sets of `IonButtons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `IonTitle` element.
 
-`IonButtons` elements that do not have `collapse` set will always be visible, regardless of collapsed state.
+`IonButtons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
 
 When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
 
@@ -289,7 +289,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
 <template>
   <ion-header translucent="true">
     <ion-toolbar>   
-      <ion-buttons collapse="true">
+      <ion-buttons collapse="true" slot="end">
         <ion-button>Click Me</ion-button>
       </ion-buttons> 
       <ion-title>Settings</ion-title>               
@@ -299,7 +299,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
   <ion-content fullscreen="true">
     <ion-header collapse="condense">              
       <ion-toolbar>      
-        <ion-buttons collapse="true">
+        <ion-buttons collapse="true" slot="end">
           <ion-button>Click Me</ion-button>
         </ion-buttons>
         <ion-title size="large">Settings</ion-title>
@@ -317,7 +317,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
 
 In this example, notice that we have added two sets of `ion-buttons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
 
-`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state.
+`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
 
 When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
 
diff --git a/core/src/components/title/usage/angular.md b/core/src/components/title/usage/angular.md
index 459d8abc0f..fa530033c2 100644
--- a/core/src/components/title/usage/angular.md
+++ b/core/src/components/title/usage/angular.md
@@ -49,7 +49,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
 ```html
 <ion-header translucent="true">
   <ion-toolbar>   
-    <ion-buttons collapse="true">
+    <ion-buttons collapse="true" slot="end">
       <ion-button>Click Me</ion-button>
     </ion-buttons> 
     <ion-title>Settings</ion-title>               
@@ -59,7 +59,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
 <ion-content fullscreen="true">
   <ion-header collapse="condense">              
     <ion-toolbar>      
-      <ion-buttons collapse="true">
+      <ion-buttons collapse="true" slot="end">
         <ion-button>Click Me</ion-button>
       </ion-buttons>
       <ion-title size="large">Settings</ion-title>
@@ -76,7 +76,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
 
 In this example, notice that we have added two sets of `ion-buttons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
 
-`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state.
+`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
 
 When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
 
diff --git a/core/src/components/title/usage/javascript.md b/core/src/components/title/usage/javascript.md
index 459d8abc0f..fa530033c2 100644
--- a/core/src/components/title/usage/javascript.md
+++ b/core/src/components/title/usage/javascript.md
@@ -49,7 +49,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
 ```html
 <ion-header translucent="true">
   <ion-toolbar>   
-    <ion-buttons collapse="true">
+    <ion-buttons collapse="true" slot="end">
       <ion-button>Click Me</ion-button>
     </ion-buttons> 
     <ion-title>Settings</ion-title>               
@@ -59,7 +59,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
 <ion-content fullscreen="true">
   <ion-header collapse="condense">              
     <ion-toolbar>      
-      <ion-buttons collapse="true">
+      <ion-buttons collapse="true" slot="end">
         <ion-button>Click Me</ion-button>
       </ion-buttons>
       <ion-title size="large">Settings</ion-title>
@@ -76,7 +76,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
 
 In this example, notice that we have added two sets of `ion-buttons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
 
-`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state.
+`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
 
 When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
 
diff --git a/core/src/components/title/usage/react.md b/core/src/components/title/usage/react.md
index 416a14d3ce..f8ad4f33f5 100644
--- a/core/src/components/title/usage/react.md
+++ b/core/src/components/title/usage/react.md
@@ -83,7 +83,7 @@ export const LargeTitleExample: React.FC = () => (
   <>
     <IonHeader translucent="true">
       <IonToolbar>   
-        <IonButtons collapse="true">
+        <IonButtons collapse="true" slot="end">
           <IonButton>Click Me</IonButton>
         </IonButtons> 
         <IonTitle>Settings</IonTitle>               
@@ -93,7 +93,7 @@ export const LargeTitleExample: React.FC = () => (
     <IonContent fullscreen="true">
       <IonHeader collapse="condense">              
         <IonToolbar>      
-          <IonButtons collapse="true">
+          <IonButtons collapse="true" slot="end">
             <IonButton>Click Me</IonButton>
           </IonButtons>
           <IonTitle size="large">Settings</IonTitle>
@@ -112,7 +112,7 @@ export const LargeTitleExample: React.FC = () => (
 
 In this example, notice that we have added two sets of `IonButtons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `IonTitle` element.
 
-`IonButtons` elements that do not have `collapse` set will always be visible, regardless of collapsed state.
+`IonButtons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
 
 When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.
 
diff --git a/core/src/components/title/usage/vue.md b/core/src/components/title/usage/vue.md
index 86204784ec..a3766bffa3 100644
--- a/core/src/components/title/usage/vue.md
+++ b/core/src/components/title/usage/vue.md
@@ -54,7 +54,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
 <template>
   <ion-header translucent="true">
     <ion-toolbar>   
-      <ion-buttons collapse="true">
+      <ion-buttons collapse="true" slot="end">
         <ion-button>Click Me</ion-button>
       </ion-buttons> 
       <ion-title>Settings</ion-title>               
@@ -64,7 +64,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
   <ion-content fullscreen="true">
     <ion-header collapse="condense">              
       <ion-toolbar>      
-        <ion-buttons collapse="true">
+        <ion-buttons collapse="true" slot="end">
           <ion-button>Click Me</ion-button>
         </ion-buttons>
         <ion-title size="large">Settings</ion-title>
@@ -82,7 +82,7 @@ In the example above, notice there are two `ion-header` elements. The first `ion
 
 In this example, notice that we have added two sets of `ion-buttons` both with `collapse="true"`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
 
-`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state.
+`ion-buttons` elements that do not have `collapse` set will always be visible, regardless of collapsed state. When using the large title and `ion-buttons` elements inside of `ion-content`, the `ion-buttons` elements should always be placed in the `end` slot.
 
 When styling the large title, you should target the large title globally as opposed to within the context of a particular page or tab, otherwise its styles will not be applied during the navigation animation.