diff --git a/apps/showcase/doc/speeddial/CircleDoc.vue b/apps/showcase/doc/speeddial/CircleDoc.vue
index c687a6699..50749edc4 100644
--- a/apps/showcase/doc/speeddial/CircleDoc.vue
+++ b/apps/showcase/doc/speeddial/CircleDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }" class="flex items-center justify-center">
-            <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warn" :style="{ position: 'absolute' }" />
+            <SpeedDial :model="items" :radius="80" type="circle" :style="{ position: 'absolute' }" :buttonProps="{ severity: 'warning' }" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -53,13 +53,13 @@ export default {
             ],
             code: {
                 basic: `
-<SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warn" :style="{ position: 'absolute' }" />
+<SpeedDial :model="items" :radius="80" type="circle" :style="{ position: 'absolute' }" :buttonProps="{ severity: 'warning' }" />
 `,
                 options: `
 <template>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }" class="flex items-center justify-center">
-            <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warn" :style="{ position: 'absolute' }" />
+            <SpeedDial :model="items" :radius="80" type="circle" :style="{ position: 'absolute' }" :buttonProps="{ severity: 'warning' }" />
             <Toast />
         </div>
     </div>
@@ -115,7 +115,7 @@ export default {
 <template>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }" class="flex items-center justify-center">
-            <SpeedDial :model="items" :radius="80" type="circle" buttonClass="p-button-warn" :style="{ position: 'absolute' }" />
+            <SpeedDial :model="items" :radius="80" type="circle" :style="{ position: 'absolute' }" :buttonProps="{ severity: 'warning' }" />
             <Toast />
         </div>
     </div>
diff --git a/apps/showcase/doc/speeddial/TooltipDoc.vue b/apps/showcase/doc/speeddial/TooltipDoc.vue
index 1e83fd074..27ecf1608 100644
--- a/apps/showcase/doc/speeddial/TooltipDoc.vue
+++ b/apps/showcase/doc/speeddial/TooltipDoc.vue
@@ -4,8 +4,8 @@
     </DocSectionText>
     <div class="card">
         <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', right: 0, bottom: 0 }" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
-            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 0, bottom: 0 }" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" />
+            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', right: 0, bottom: 0 }" :buttonProps="{ severity: 'help' }" :tooltipOptions="{ position: 'left' }" />
+            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 0, bottom: 0 }" :buttonProps="{ severity: 'danger' }" :tooltipOptions="{ position: 'right' }" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -54,15 +54,15 @@ export default {
             ],
             code: {
                 basic: `
-<SpeedDial :model="items" direction="up" :style="{ position: 'absolute', right: 0, bottom: 0 }" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
-<SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 0, bottom: 0 }" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" />
+<SpeedDial :model="items" direction="up" :style="{ position: 'absolute', right: 0, bottom: 0 }" :buttonProps="{ severity: 'help' }" :tooltipOptions="{ position: 'left' }" />
+<SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 0, bottom: 0 }" :buttonProps="{ severity: 'danger' }" :tooltipOptions="{ position: 'right' }" />
 `,
                 options: `
 <template>
     <div class="card">
         <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', right: 0, bottom: 0 }" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
-            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 0, bottom: 0 }" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" />
+            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', right: 0, bottom: 0 }" :buttonProps="{ severity: 'help' }" :tooltipOptions="{ position: 'left' }" />
+            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 0, bottom: 0 }" :buttonProps="{ severity: 'danger' }" :tooltipOptions="{ position: 'right' }" />
             <Toast />
         </div>
     </div>
@@ -118,8 +118,8 @@ export default {
 <template>
     <div class="card">
         <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', right: 0, bottom: 0 }" buttonClass="p-button-help" :tooltipOptions="{ position: 'left' }" />
-            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 0, bottom: 0 }" buttonClass="p-button-danger" :tooltipOptions="{ position: 'right' }" />
+            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', right: 0, bottom: 0 }" :buttonProps="{ severity: 'help' }" :tooltipOptions="{ position: 'left' }" />
+            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 0, bottom: 0 }" :buttonProps="{ severity: 'danger' }" :tooltipOptions="{ position: 'right' }" />
             <Toast />
         </div>
     </div>