diff --git a/doc/confirmpopup/HeadlessDoc.vue b/doc/confirmpopup/HeadlessDoc.vue
index 209483146..16d765126 100644
--- a/doc/confirmpopup/HeadlessDoc.vue
+++ b/doc/confirmpopup/HeadlessDoc.vue
@@ -7,8 +7,8 @@
             <div class="bg-gray-900 text-white border-round p-3">
                 <span>{{ message.message }}</span>
                 <div class="flex align-items-center gap-2 mt-3">
-                    <Button label="Save" @click="acceptCallback" class="p-button-sm p-button-outlined"></Button>
-                    <Button label="Cancel" outlined @click="rejectCallback" class="p-button-sm p-button-text"></Button>
+                    <Button label="Save" @click="acceptCallback" size="small" outlined></Button>
+                    <Button label="Cancel" outlined @click="rejectCallback" size="small" text></Button>
                 </div>
             </div>
         </template>
@@ -30,8 +30,8 @@ export default {
         <div class="bg-gray-900 text-white border-round p-3">
             <span>{{ message.message }}</span>
             <div class="flex align-items-center gap-2 mt-3">
-                <Button label="Save" @click="acceptCallback" class="p-button-sm p-button-outlined"></Button>
-                <Button label="Cancel" outlined @click="rejectCallback" class="p-button-sm p-button-text"></Button>
+                <Button label="Save" @click="acceptCallback" size="small" outlined></Button>
+                <Button label="Cancel" outlined @click="rejectCallback" size="small" text></Button>
             </div>
         </div>
     </template>
@@ -46,8 +46,8 @@ export default {
             <div class="bg-gray-900 text-white border-round p-3">
                 <span>{{ message.message }}</span>
                 <div class="flex align-items-center gap-2 mt-3">
-                    <Button label="Save" @click="acceptCallback" class="p-button-sm p-button-outlined"></Button>
-                    <Button label="Cancel" outlined @click="rejectCallback" class="p-button-sm p-button-text"></Button>
+                    <Button label="Save" @click="acceptCallback" size="small" outlined></Button>
+                    <Button label="Cancel" outlined @click="rejectCallback" size="small" text></Button>
                 </div>
             </div>
         </template>
@@ -85,8 +85,8 @@ export default {
             <div class="bg-gray-900 text-white border-round p-3">
                 <span>{{ message.message }}</span>
                 <div class="flex align-items-center gap-2 mt-3">
-                    <Button label="Save" @click="acceptCallback" class="p-button-sm p-button-outlined"></Button>
-                    <Button label="Cancel" outlined @click="rejectCallback" class="p-button-sm p-button-text"></Button>
+                    <Button label="Save" @click="acceptCallback" size="small" outlined></Button>
+                    <Button label="Cancel" outlined @click="rejectCallback" size="small" text></Button>
                 </div>
             </div>
         </template>