diff --git a/doc/selectbutton/BasicDoc.vue b/doc/selectbutton/BasicDoc.vue
index cc309c4e9..408fa0de4 100644
--- a/doc/selectbutton/BasicDoc.vue
+++ b/doc/selectbutton/BasicDoc.vue
@@ -15,8 +15,8 @@
 export default {
     data() {
         return {
-            value: 'Off',
-            options: ['Off', 'On'],
+            value: 'One-Way',
+            options: ['One-Way', 'Return'],
             code: {
                 basic: `
 <SelectButton v-model="value" :options="options" aria-labelledby="basic" />
@@ -32,8 +32,8 @@ export default {
 export default {
     data() {
         return {
-            value: 'Off',
-            options: ['Off', 'On']
+            value: 'One-Way',
+            options: ['One-Way', 'Return']
         }
     }
 };
@@ -49,8 +49,8 @@ export default {
 <script setup>
 import { ref } from 'vue';
 
-const value = ref('Off');
-const options = ref(['Off', 'On']);
+const value = ref('One-Way');
+const options = ref(['One-Way', 'Return']);
 <\/script>
 `
             }
diff --git a/doc/selectbutton/InvalidDoc.vue b/doc/selectbutton/InvalidDoc.vue
index 92a9e0e04..f9d19f530 100644
--- a/doc/selectbutton/InvalidDoc.vue
+++ b/doc/selectbutton/InvalidDoc.vue
@@ -12,8 +12,8 @@
 export default {
     data() {
         return {
-            value: 'Off',
-            options: ['Off', 'On'],
+            value: 'One-Way',
+            options: ['One-Way', 'Return'],
             code: {
                 basic: `
 <SelectButton v-model="value" :options="options" aria-labelledby="basic" class="p-invalid" />
@@ -29,8 +29,8 @@ export default {
 export default {
     data() {
         return {
-            value: 'off',
-            options: ['Off', 'On']
+            value: 'One-Way',
+            options: ['One-Way', 'Return'],
         }
     }
 };
@@ -46,8 +46,8 @@ export default {
 <script setup>
 import { ref } from 'vue';
 
-const value = ref('off');
-const options = ref(['Off', 'On']);
+const value = ref('One-Way');
+const options = ref(['One-Way', 'Return']);
 <\/script>
 `
             }
diff --git a/doc/togglebutton/BasicDoc.vue b/doc/togglebutton/BasicDoc.vue
index b2ddbfa31..e25bf906c 100644
--- a/doc/togglebutton/BasicDoc.vue
+++ b/doc/togglebutton/BasicDoc.vue
@@ -3,7 +3,7 @@
         <p>Two-way binding to a boolean property is defined using the standard v-model directive.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <ToggleButton v-model="checked" class="w-8rem" />
+        <ToggleButton v-model="checked" class="w-6rem" onLabel="On" offLabel="Off" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             checked: false,
             code: {
                 basic: `
-<ToggleButton v-model="checked" />
+<ToggleButton v-model="checked" onLabel="On" offLabel="Off" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <ToggleButton v-model="checked" class="w-8rem" />
+        <ToggleButton v-model="checked" class="w-6rem" onLabel="On" offLabel="Off" />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <ToggleButton v-model="checked" class="w-8rem" />
+        <ToggleButton v-model="checked" class="w-6rem" onLabel="On" offLabel="Off" />
     </div>
 </template>
 
diff --git a/doc/togglebutton/CustomizedDoc.vue b/doc/togglebutton/CustomizedDoc.vue
index 062252b0c..dc74311af 100644
--- a/doc/togglebutton/CustomizedDoc.vue
+++ b/doc/togglebutton/CustomizedDoc.vue
@@ -3,7 +3,7 @@
         <p>Icons and Labels can be customized using <i>onLabel</i>, <i>offLabel</i>, <i>onIcon</i> and <i>offIcon</i> properties.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <ToggleButton v-model="checked" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" class="w-9rem" aria-label="do you confirm" />
+        <ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock" offIcon="pi pi-lock-open" class="w-9rem" aria-label="Do you confirm" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,14 +15,14 @@ export default {
             checked: false,
             code: {
                 basic: `
-<ToggleButton v-model="checked1" onLabel="I confirm" offLabel="I reject"
-    onIcon="pi pi-check" offIcon="pi pi-times" class="w-9rem" />
+<ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock" 
+    offIcon="pi pi-lock-open" class="w-9rem" aria-label="Do you confirm" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <ToggleButton v-model="checked" onLabel="I confirm" offLabel="I reject"
-            onIcon="pi pi-check" offIcon="pi pi-times" class="w-9rem" />
+        <ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock" 
+            offIcon="pi pi-lock-open" class="w-9rem" aria-label="Do you confirm" />
     </div>
 </template>
 
@@ -39,8 +39,8 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <ToggleButton v-model="checked" onLabel="I confirm" offLabel="I reject"
-            onIcon="pi pi-check" offIcon="pi pi-times" class="w-9rem" />
+        <ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock" 
+            offIcon="pi pi-lock-open" class="w-9rem" aria-label="Do you confirm" />
     </div>
 </template>