diff --git a/doc/splitbutton/TemplateDoc.vue b/doc/splitbutton/TemplateDoc.vue
index 9a0b54e81..731a3a53a 100644
--- a/doc/splitbutton/TemplateDoc.vue
+++ b/doc/splitbutton/TemplateDoc.vue
@@ -3,11 +3,9 @@
         <p>Custom content inside a button is defined as children.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round">
-            <Button @click="save">
-                <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 1rem" />
-                <span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
-            </Button>
+        <SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round" @click="save">
+            <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 1rem" />
+            <span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
         </SplitButton>
     </div>
     <DocSectionCode :code="code" />
@@ -43,22 +41,18 @@ export default {
             ],
             code: {
                 basic: `
-<SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round">
-    <Button @click="save">
-        <img alt="logo" src="/images/logo.svg" style="width: 1rem" />
-        <span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
-    </Button>
+<SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round" @click="save">
+    <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 1rem" />
+    <span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
 </SplitButton>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
         <Toast />
-        <SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round">
-            <Button @click="save">
-                <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 1rem" />
-                <span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
-            </Button>
+        <SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round" @click="save">
+            <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 1rem" />
+            <span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
         </SplitButton>
     </div>
 </template>
@@ -105,11 +99,9 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <Toast />
-        <SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round">
-            <Button @click="save">
-                <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 1rem" />
-                <span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
-            </Button>
+        <SplitButton :model="items" icon="pi pi-plus" class="bg-primary border-round" @click="save">
+            <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 1rem" />
+            <span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
         </SplitButton>
     </div>
 </template>