diff --git a/doc/tabview/ControlledDoc.vue b/doc/tabview/ControlledDoc.vue
index 327c50186..c88f70b16 100644
--- a/doc/tabview/ControlledDoc.vue
+++ b/doc/tabview/ControlledDoc.vue
@@ -4,9 +4,9 @@
     </DocSectionText>
     <div class="card">
         <div class="flex mb-2 gap-2 justify-content-end">
-            <Button @click="active = 0" text plain rounded label="1" :class="['w-2rem h-2rem p-0', { 'text-primary': active === 0 }]" />
-            <Button @click="active = 1" text plain rounded label="2" :class="['w-2rem h-2rem p-0', { 'text-primary': active === 1 }]" />
-            <Button @click="active = 2" text plain rounded label="3" :class="['w-2rem h-2rem p-0', { 'text-primary': active === 2 }]" />
+            <Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
+            <Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
+            <Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
         </div>
 
         <TabView v-model:activeIndex="active">
@@ -41,9 +41,9 @@ export default {
             code: {
                 basic: `
 <div class="flex mb-2 gap-2 justify-content-end">
-    <Button @click="active = 0" text plain rounded label="1" :class="['w-2rem h-2rem p-0', { 'text-primary': active === 0 }]" />
-    <Button @click="active = 1" text plain rounded label="2" :class="['w-2rem h-2rem p-0', { 'text-primary': active === 1 }]" />
-    <Button @click="active = 2" text plain rounded label="3" :class="['w-2rem h-2rem p-0', { 'text-primary': active === 2 }]" />
+    <Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
+    <Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
+    <Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
 </div>
 
 <TabView v-model:activeIndex="active">
@@ -71,9 +71,9 @@ export default {
 <template>
     <div class="card">
         <div class="flex mb-2 gap-2 justify-content-end">
-            <Button @click="active = 0" text plain rounded label="1" :class="['w-2rem h-2rem p-0', { 'text-primary': active === 0 }]" />
-            <Button @click="active = 1" text plain rounded label="2" :class="['w-2rem h-2rem p-0', { 'text-primary': active === 1 }]" />
-            <Button @click="active = 2" text plain rounded label="3" :class="['w-2rem h-2rem p-0', { 'text-primary': active === 2 }]" />
+            <Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
+            <Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
+            <Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
         </div>
 
         <TabView v-model:activeIndex="active">
@@ -113,9 +113,9 @@ export default {
 <template>
     <div class="card">
         <div class="flex mb-2 gap-2 justify-content-end">
-            <Button @click="active = 0" text plain rounded label="1" :class="['w-2rem h-2rem p-0', { 'text-primary': active === 0 }]" />
-            <Button @click="active = 1" text plain rounded label="2" :class="['w-2rem h-2rem p-0', { 'text-primary': active === 1 }]" />
-            <Button @click="active = 2" text plain rounded label="3" :class="['w-2rem h-2rem p-0', { 'text-primary': active === 2 }]" />
+            <Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
+            <Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
+            <Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
         </div>
 
         <TabView v-model:activeIndex="active">