diff --git a/doc/splitbutton/OutlinedDoc.vue b/doc/splitbutton/OutlinedDoc.vue
index ca0688f93..bd4b28baf 100644
--- a/doc/splitbutton/OutlinedDoc.vue
+++ b/doc/splitbutton/OutlinedDoc.vue
@@ -3,13 +3,13 @@
         <p>Outlined buttons display a border without a background initially.</p>
     </DocSectionText>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-secondary mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-success mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-info mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-warning mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-help mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-danger mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="secondary" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="success" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="info" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger" class="mb-2"></SplitButton>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -44,24 +44,24 @@ export default {
             ],
             code: {
                 basic: `
-<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-secondary mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-success mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-info mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-warning mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-help mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-danger mb-2"></SplitButton>`,
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="secondary" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="success" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="info" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger" class="mb-2"></SplitButton>`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined  p-button-secondary mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-success mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-info mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-warning mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-help mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-danger mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="secondary" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="success" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="info" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger" class="mb-2"></SplitButton>
     </div>
 </template>
 
@@ -106,13 +106,13 @@ export default {
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined  p-button-secondary mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-success mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-info mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-warning mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-help mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-outlined p-button-danger mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="secondary" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="success" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="info" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger" class="mb-2"></SplitButton>
     </div>
 </template>
 
diff --git a/doc/splitbutton/RaisedDoc.vue b/doc/splitbutton/RaisedDoc.vue
index b9251ece1..275cb58b2 100644
--- a/doc/splitbutton/RaisedDoc.vue
+++ b/doc/splitbutton/RaisedDoc.vue
@@ -3,13 +3,13 @@
         <p>Raised buttons display a shadow to indicate elevation.</p>
     </DocSectionText>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-secondary mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-success mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-info mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-warning mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-help mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-danger mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="secondary" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="success" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="info" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger" class="mb-2"></SplitButton>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -44,24 +44,24 @@ export default {
             ],
             code: {
                 basic: `
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-secondary mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-success mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-info mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-warning mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-help mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-danger mb-2"></SplitButton>`,
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="secondary" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="success" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="info" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger" class="mb-2"></SplitButton>`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised  mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised  p-button-secondary mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-success mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-info mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-warning mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-help mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-danger mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="secondary" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="success" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="info" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger" class="mb-2"></SplitButton>
     </div>
 </template>
 
@@ -106,13 +106,13 @@ export default {
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised  p-button-secondary mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-success mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-info mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-warning mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-help mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-danger mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="secondary" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="success" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="info" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger" class="mb-2"></SplitButton>
     </div>
 </template>
 
diff --git a/doc/splitbutton/RaisedTextDoc.vue b/doc/splitbutton/RaisedTextDoc.vue
index 78e75164c..0f716a522 100644
--- a/doc/splitbutton/RaisedTextDoc.vue
+++ b/doc/splitbutton/RaisedTextDoc.vue
@@ -3,13 +3,13 @@
         <p>Text buttons can be displayed as raised as well for elevation.</p>
     </DocSectionText>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-secondary mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-success mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-info mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-warning mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-help mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-danger mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="secondary" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="success" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="info" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="warning" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="help" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="danger" class="mb-2"></SplitButton>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -44,24 +44,24 @@ export default {
             ],
             code: {
                 basic: `
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-secondary mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-success mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-info mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-warning mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-help mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-danger mb-2"></SplitButton>`,
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="secondary" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="success" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="info" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="warning" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="help" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="danger" class="mb-2"></SplitButton>`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text  p-button-secondary mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-success mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-info mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-warning mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-help mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-danger mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="secondary" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="success" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="info" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="warning" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="help" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="danger" class="mb-2"></SplitButton>
     </div>
 </template>
 
@@ -106,13 +106,13 @@ export default {
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text  p-button-secondary mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-success mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-info mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-warning mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-help mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-raised p-button-text p-button-danger mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="secondary" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="success" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="info" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="warning" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="help" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="danger" class="mb-2"></SplitButton>
     </div>
 </template>
 
diff --git a/doc/splitbutton/RoundedDoc.vue b/doc/splitbutton/RoundedDoc.vue
index 833acfaef..d27a84f2b 100644
--- a/doc/splitbutton/RoundedDoc.vue
+++ b/doc/splitbutton/RoundedDoc.vue
@@ -3,13 +3,13 @@
         <p>Rounded buttons have a circular border radius.</p>
     </DocSectionText>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-secondary mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-success mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-info mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-warning mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-help mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-danger mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="secondary" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="success" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="info" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger" class="mb-2"></SplitButton>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -44,24 +44,24 @@ export default {
             ],
             code: {
                 basic: `
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-secondary mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-success mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-info mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-warning mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-help mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-danger mb-2"></SplitButton>`,
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="secondary" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="success" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="info" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger" class="mb-2"></SplitButton>`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded  p-button-secondary mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-success mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-info mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-warning mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-help mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-danger mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="secondary" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="success" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="info" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger" class="mb-2"></SplitButton>
     </div>
 </template>
 
@@ -106,13 +106,13 @@ export default {
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded  p-button-secondary mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-success mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-info mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-warning mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-help mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-rounded p-button-danger mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="secondary" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="success" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="info" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger" class="mb-2"></SplitButton>
     </div>
 </template>
 
diff --git a/doc/splitbutton/SeverityDoc.vue b/doc/splitbutton/SeverityDoc.vue
index 225605701..69ba1ab79 100644
--- a/doc/splitbutton/SeverityDoc.vue
+++ b/doc/splitbutton/SeverityDoc.vue
@@ -4,12 +4,12 @@
     </DocSectionText>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-secondary mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-success mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-info mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-warning mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-help mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-danger mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger" class="mb-2"></SplitButton>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -45,23 +45,23 @@ export default {
             code: {
                 basic: `
 <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-secondary mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-success mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-info mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-warning mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-help mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-danger mb-2"></SplitButton>`,
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger" class="mb-2"></SplitButton>`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-secondary mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-success mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-info mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-warning mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-help mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-danger mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger" class="mb-2"></SplitButton>
     </div>
 </template>
 
@@ -107,12 +107,12 @@ export default {
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
         <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-secondary mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-success mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-info mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-warning mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-help mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="p-button-danger mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger" class="mb-2"></SplitButton>
     </div>
 </template>
 
diff --git a/doc/splitbutton/SizesDoc.vue b/doc/splitbutton/SizesDoc.vue
index ec4c71141..1641d83b3 100644
--- a/doc/splitbutton/SizesDoc.vue
+++ b/doc/splitbutton/SizesDoc.vue
@@ -3,9 +3,9 @@
         <p>SplitButton provides <i>small</i> and <i>large</i> sizes as alternatives to the standard.</p>
     </DocSectionText>
     <div class="card flex align-items-center justify-content-center flex-wrap gap-3">
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-sm"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" size="small"></SplitButton>
         <SplitButton label="Save" :model="items" icon="pi pi-plus"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" class="p-button-lg"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" size="large"></SplitButton>
     </div>
     <DocSectionCode :code="code" />
 </template>
diff --git a/doc/splitbutton/TemplateDoc.vue b/doc/splitbutton/TemplateDoc.vue
index 98581c43a..d28f8e47c 100644
--- a/doc/splitbutton/TemplateDoc.vue
+++ b/doc/splitbutton/TemplateDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>SplitButton has a default command button and a collection of additional options defined by the <i>model</i> property.</p>
+        <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">
diff --git a/doc/splitbutton/TextDoc.vue b/doc/splitbutton/TextDoc.vue
index a89aae816..79dca4714 100644
--- a/doc/splitbutton/TextDoc.vue
+++ b/doc/splitbutton/TextDoc.vue
@@ -3,13 +3,13 @@
         <p>Text buttons are displayed as textual elements.</p>
     </DocSectionText>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <SplitButton label="Save" :model="items" @click="save" class="p-button-text mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-secondary mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-success mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-info mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-warning mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-help mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-danger mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="secondary" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="success" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="info" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="warning" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="help" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="danger" class="mb-2"></SplitButton>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -44,24 +44,24 @@ export default {
             ],
             code: {
                 basic: `
-<SplitButton label="Save" :model="items" @click="save" class="p-button-text mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-secondary mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-success mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-info mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-warning mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-help mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-danger mb-2"></SplitButton>`,
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="secondary" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="success" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="info" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="warning" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="help" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="danger" class="mb-2"></SplitButton>`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" @click="save" class="p-button-text mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" class="p-button-text  p-button-secondary mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-success mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-info mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-warning mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-help mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-danger mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="secondary" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="success" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="info" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="warning" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="help" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="danger" class="mb-2"></SplitButton>
     </div>
 </template>
 
@@ -106,13 +106,13 @@ export default {
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" @click="save" class="p-button-text mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" class="p-button-text  p-button-secondary mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-success mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-info mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-warning mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-help mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" @click="save" class="p-button-text p-button-danger mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="secondary" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="success" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="info" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="warning" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="help" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="danger" class="mb-2"></SplitButton>
     </div>
 </template>
 
diff --git a/doc/toolbar/BasicDoc.vue b/doc/toolbar/BasicDoc.vue
index a79dcf925..18abf17e3 100644
--- a/doc/toolbar/BasicDoc.vue
+++ b/doc/toolbar/BasicDoc.vue
@@ -8,7 +8,7 @@
                 <Button label="New" icon="pi pi-plus" class="mr-2" />
                 <Button label="Upload" icon="pi pi-upload" severity="success" />
                 <i class="pi pi-bars p-toolbar-separator mr-2" />
-                <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
+                <SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton>
             </template>
 
             <template #end>
@@ -56,7 +56,7 @@ export default {
         <Button label="New" icon="pi pi-plus" class="mr-2" />
         <Button label="Upload" icon="pi pi-upload" severity="success" />
         <i class="pi pi-bars p-toolbar-separator mr-2" />
-        <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
+        <SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton>
     </template>
 
     <template #end>
@@ -73,7 +73,7 @@ export default {
                 <Button label="New" icon="pi pi-plus" class="mr-2" />
                 <Button label="Upload" icon="pi pi-upload" severity="success" />
                 <i class="pi pi-bars p-toolbar-separator mr-2" />
-                <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
+                <SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton>
             </template>
 
             <template #end>
@@ -125,7 +125,7 @@ export default {
                 <Button label="New" icon="pi pi-plus" class="mr-2" />
                 <Button label="Upload" icon="pi pi-upload" severity="success" />
                 <i class="pi pi-bars p-toolbar-separator mr-2" />
-                <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
+                <SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton>
             </template>
 
             <template #end>
diff --git a/pages/splitbutton/index.vue b/pages/splitbutton/index.vue
index a74b6a2f7..f3b2d1abf 100755
--- a/pages/splitbutton/index.vue
+++ b/pages/splitbutton/index.vue
@@ -36,16 +36,16 @@ export default {
                     label: 'Severity',
                     component: SeverityDoc
                 },
-                {
-                    id: 'outlined',
-                    label: 'Outlined',
-                    component: OutlinedDoc
-                },
                 {
                     id: 'raised',
                     label: 'Raised',
                     component: RaisedDoc
                 },
+                {
+                    id: 'rounded',
+                    label: 'Rounded',
+                    component: RoundedDoc
+                },
                 {
                     id: 'text',
                     label: 'Text',
@@ -57,9 +57,9 @@ export default {
                     component: RaisedTextDoc
                 },
                 {
-                    id: 'rounded',
-                    label: 'Rounded',
-                    component: RoundedDoc
+                    id: 'outlined',
+                    label: 'Outlined',
+                    component: OutlinedDoc
                 },
                 {
                     id: 'sizes',