diff --git a/components/doc/splitbutton/outlineddoc.js b/components/doc/splitbutton/outlineddoc.js
index 89b51677e6..b14b2b0c8b 100644
--- a/components/doc/splitbutton/outlineddoc.js
+++ b/components/doc/splitbutton/outlineddoc.js
@@ -46,13 +46,13 @@ export function OutlinedDoc(props) {
     const code = {
         basic: `
 <Toast ref={toast}></Toast>
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-outlined" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary p-button-outlined" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success p-button-outlined" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info p-button-outlined" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning p-button-outlined" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help p-button-outlined" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger p-button-outlined" />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} outlined />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" outlined />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" outlined />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" outlined />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" outlined />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" outlined />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" outlined />
         `,
         javascript: `
 import React, { useRef } from 'react';
@@ -101,13 +101,13 @@ export default function OutlinedDemo() {
     return (
         <div className="card flex justify-content-center">
             <Toast ref={toast}></Toast>
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-outlined" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary p-button-outlined" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success p-button-outlined" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info p-button-outlined" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning p-button-outlined" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help p-button-outlined" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger p-button-outlined" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" outlined />
         </div>
     )
 }
@@ -160,13 +160,13 @@ export default function OutlinedDemo() {
     return (
         <div className="card flex justify-content-center">
             <Toast ref={toast}></Toast>
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-outlined" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary p-button-outlined" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success p-button-outlined" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info p-button-outlined" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning p-button-outlined" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help p-button-outlined" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger p-button-outlined" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" outlined />
         </div>
     )
 }
@@ -180,13 +180,13 @@ export default function OutlinedDemo() {
             </DocSectionText>
             <div className="card flex flex-wrap justify-content-center gap-3">
                 <Toast ref={toast}></Toast>
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-outlined" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary p-button-outlined" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success p-button-outlined" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info p-button-outlined" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning p-button-outlined" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help p-button-outlined" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger p-button-outlined" />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} outlined />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" outlined />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" outlined />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" outlined />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" outlined />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" outlined />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" outlined />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/splitbutton/raiseddoc.js b/components/doc/splitbutton/raiseddoc.js
index 8e0aab2725..4760b1dcf1 100644
--- a/components/doc/splitbutton/raiseddoc.js
+++ b/components/doc/splitbutton/raiseddoc.js
@@ -46,13 +46,13 @@ export function RaisedDoc(props) {
     const code = {
         basic: `
 <Toast ref={toast}></Toast>
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-raised" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary p-button-raised" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success p-button-raised" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info p-button-raised" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning p-button-raised" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help p-button-raised" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger p-button-raised" />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" raised />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised />
         `,
         javascript: `
 import React, { useRef } from 'react';
@@ -101,13 +101,13 @@ export default function RaisedDemo() {
     return (
         <div className="card flex justify-content-center">
             <Toast ref={toast}></Toast>
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-raised" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary p-button-raised" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success p-button-raised" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info p-button-raised" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning p-button-raised" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help p-button-raised" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger p-button-raised" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised />
         </div>
     )
 }
@@ -160,13 +160,13 @@ export default function RaisedDemo() {
     return (
         <div className="card flex justify-content-center">
             <Toast ref={toast}></Toast>
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-raised" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary p-button-raised" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success p-button-raised" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info p-button-raised" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning p-button-raised" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help p-button-raised" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger p-button-raised" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised />
         </div>
     )
 }
@@ -180,13 +180,13 @@ export default function RaisedDemo() {
             </DocSectionText>
             <div className="card flex flex-wrap justify-content-center gap-3">
                 <Toast ref={toast}></Toast>
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-raised" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary p-button-raised" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success p-button-raised" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info p-button-raised" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning p-button-raised" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help p-button-raised" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger p-button-raised" />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" raised />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/splitbutton/raisedtextdoc.js b/components/doc/splitbutton/raisedtextdoc.js
index 45d53d64d2..6c7b37ee44 100644
--- a/components/doc/splitbutton/raisedtextdoc.js
+++ b/components/doc/splitbutton/raisedtextdoc.js
@@ -46,13 +46,13 @@ export function RaisedTextDoc(props) {
     const code = {
         basic: `
 <Toast ref={toast}></Toast>
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-raised p-button-text" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary p-button-raised p-button-text" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success p-button-raised p-button-text" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info p-button-raised p-button-text" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning p-button-raised p-button-text" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help p-button-raised p-button-text" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger p-button-raised p-button-text" />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised text />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised text />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised text />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" raised text />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised text />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised text />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised text />
         `,
         javascript: `
 import React, { useRef } from 'react';
@@ -101,13 +101,13 @@ export default function RaisedTextDemo() {
     return (
         <div className="card flex justify-content-center">
             <Toast ref={toast}></Toast>
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-raised p-button-text" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary p-button-raised p-button-text" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success p-button-raised p-button-text" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info p-button-raised p-button-text" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning p-button-raised p-button-text" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help p-button-raised p-button-text" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger p-button-raised p-button-text" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" raised text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised text />
         </div>
     )
 }
@@ -160,13 +160,13 @@ export default function RaisedTextDemo() {
     return (
         <div className="card flex justify-content-center">
             <Toast ref={toast}></Toast>
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-raised p-button-text" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary p-button-raised p-button-text" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success p-button-raised p-button-text" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info p-button-raised p-button-text" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning p-button-raised p-button-text" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help p-button-raised p-button-text" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger p-button-raised p-button-text" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" raised text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised text />
         </div>
     )
 }
@@ -180,13 +180,13 @@ export default function RaisedTextDemo() {
             </DocSectionText>
             <div className="card flex flex-wrap justify-content-center gap-3">
                 <Toast ref={toast}></Toast>
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-raised p-button-text" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary p-button-raised p-button-text" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success p-button-raised p-button-text" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info p-button-raised p-button-text" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning p-button-raised p-button-text" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help p-button-raised p-button-text" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger p-button-raised p-button-text" />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised text />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised text />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised text />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" raised text />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised text />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised text />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised text />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/splitbutton/roundeddoc.js b/components/doc/splitbutton/roundeddoc.js
index 947fc2dfaa..e32e8c4cd4 100644
--- a/components/doc/splitbutton/roundeddoc.js
+++ b/components/doc/splitbutton/roundeddoc.js
@@ -46,13 +46,13 @@ export function RoundedDoc(props) {
     const code = {
         basic: `
 <Toast ref={toast}></Toast>
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-rounded" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary p-button-rounded" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success p-button-rounded" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info p-button-rounded" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning p-button-rounded" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help p-button-rounded" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger p-button-rounded" />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} rounded />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" rounded />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" rounded />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" rounded />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" rounded />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" rounded />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" rounded />
         `,
         javascript: `
 import React, { useRef } from 'react';
@@ -101,13 +101,13 @@ export default function RoundedDemo() {
     return (
         <div className="card flex justify-content-center">
             <Toast ref={toast}></Toast>
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-rounded" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary p-button-rounded" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success p-button-rounded" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info p-button-rounded" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning p-button-rounded" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help p-button-rounded" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger p-button-rounded" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" rounded />
         </div>
     )
 }
@@ -160,13 +160,13 @@ export default function RoundedDemo() {
     return (
         <div className="card flex justify-content-center">
             <Toast ref={toast}></Toast>
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-rounded" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary p-button-rounded" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success p-button-rounded" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info p-button-rounded" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning p-button-rounded" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help p-button-rounded" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger p-button-rounded" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" rounded />
         </div>
     )
 }
@@ -180,13 +180,13 @@ export default function RoundedDemo() {
             </DocSectionText>
             <div className="card flex flex-wrap justify-content-center gap-3">
                 <Toast ref={toast}></Toast>
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-rounded" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary p-button-rounded" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success p-button-rounded" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info p-button-rounded" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning p-button-rounded" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help p-button-rounded" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger p-button-rounded" />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} rounded />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" rounded />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" rounded />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" rounded />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" rounded />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" rounded />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" rounded />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/splitbutton/severitydoc.js b/components/doc/splitbutton/severitydoc.js
index 95e170c562..0d71273151 100644
--- a/components/doc/splitbutton/severitydoc.js
+++ b/components/doc/splitbutton/severitydoc.js
@@ -47,12 +47,12 @@ export function SeverityDoc(props) {
         basic: `
 <Toast ref={toast}></Toast>
 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger" />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" />
         `,
         javascript: `
 import React, { useRef } from 'react';
@@ -102,12 +102,12 @@ export default function SeverityDemo() {
         <div className="card flex justify-content-center">
             <Toast ref={toast}></Toast>
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" />
         </div>
     )
 }
@@ -161,12 +161,12 @@ export default function SeverityDemo() {
         <div className="card flex justify-content-center">
             <Toast ref={toast}></Toast>
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" />
         </div>
     )
 }
@@ -181,12 +181,12 @@ export default function SeverityDemo() {
             <div className="card flex flex-wrap justify-content-center gap-3">
                 <Toast ref={toast}></Toast>
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger" />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/splitbutton/sizesdoc.js b/components/doc/splitbutton/sizesdoc.js
index 139b6a3285..5c1f86e63e 100644
--- a/components/doc/splitbutton/sizesdoc.js
+++ b/components/doc/splitbutton/sizesdoc.js
@@ -46,9 +46,9 @@ export function SizesDoc(props) {
     const code = {
         basic: `
 <Toast ref={toast}></Toast>
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-sm" />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} size="small" />
 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-lg" />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} size="large" />
         `,
         javascript: `
 import React, { useRef } from 'react';
@@ -97,9 +97,9 @@ export default function SizesDemo() {
     return (
         <div className="card flex justify-content-center">
             <Toast ref={toast}></Toast>
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-sm" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} size="small" />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-lg" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} size="large" />
         </div>
     )
 }
@@ -152,9 +152,9 @@ export default function SizesDemo() {
     return (
         <div className="card flex justify-content-center">
             <Toast ref={toast}></Toast>
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-sm" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} size="small" />
             <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-lg" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} size="large" />
         </div>
     )
 }
@@ -170,9 +170,9 @@ export default function SizesDemo() {
             </DocSectionText>
             <div className="card flex flex-wrap align-items-center justify-content-center gap-3">
                 <Toast ref={toast}></Toast>
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-sm" />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} size="small" />
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-lg" />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} size="large" />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/doc/splitbutton/textdoc.js b/components/doc/splitbutton/textdoc.js
index 72003a023a..5a2e2aca0c 100644
--- a/components/doc/splitbutton/textdoc.js
+++ b/components/doc/splitbutton/textdoc.js
@@ -46,13 +46,13 @@ export function TextDoc(props) {
     const code = {
         basic: `
 <Toast ref={toast}></Toast>
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-text" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary p-button-text" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success p-button-text" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info p-button-text" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning p-button-text" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help p-button-text" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger p-button-text" />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} text />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" text />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" text />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" text />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" text />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" text />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" text />
         `,
         javascript: `
 import React, { useRef } from 'react';
@@ -101,13 +101,13 @@ export default function TextDemo() {
     return (
         <div className="card flex justify-content-center">
             <Toast ref={toast}></Toast>
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-text" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary p-button-text" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success p-button-text" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info p-button-text" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning p-button-text" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help p-button-text" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger p-button-text" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" text />
         </div>
     )
 }
@@ -160,13 +160,13 @@ export default function TextDemo() {
     return (
         <div className="card flex justify-content-center">
             <Toast ref={toast}></Toast>
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-text" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary p-button-text" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success p-button-text" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info p-button-text" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning p-button-text" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help p-button-text" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger p-button-text" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" text />
         </div>
     )
 }
@@ -180,13 +180,13 @@ export default function TextDemo() {
             </DocSectionText>
             <div className="card flex flex-wrap justify-content-center gap-3">
                 <Toast ref={toast}></Toast>
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-text" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary p-button-text" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success p-button-text" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info p-button-text" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning p-button-text" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help p-button-text" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger p-button-text" />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} text />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" text />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" text />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" text />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" text />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" text />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" text />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/lib/splitbutton/SplitButton.js b/components/lib/splitbutton/SplitButton.js
index 953c266308..22041c0bc8 100644
--- a/components/lib/splitbutton/SplitButton.js
+++ b/components/lib/splitbutton/SplitButton.js
@@ -109,7 +109,21 @@ export const SplitButton = React.memo(
 
         const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
         const otherProps = SplitButtonBase.getOtherProps(props);
-        const className = classNames('p-splitbutton p-component', props.className, { 'p-disabled': props.disabled });
+        const sizeMapping = {
+            large: 'lg',
+            small: 'sm'
+        };
+        const size = sizeMapping[props.size];
+        const className = classNames('p-splitbutton p-component', props.className, {
+            'p-disabled': props.disabled,
+            'p-button-loading-label-only': props.loading && !props.icon && props.label,
+            [`p-button-${props.severity}`]: props.severity,
+            'p-button-raised': props.raised,
+            'p-button-rounded': props.rounded,
+            'p-button-text': props.text,
+            'p-button-outlined': props.outlined,
+            [`p-button-${size}`]: size
+        });
         const buttonClassName = classNames('p-splitbutton-defaultbutton', props.buttonClassName);
         const menuButtonClassName = classNames('p-splitbutton-menubutton', props.menuButtonClassName);
         const buttonContent = props.buttonTemplate ? ObjectUtils.getJSXElement(props.buttonTemplate, props) : null;
diff --git a/components/lib/splitbutton/SplitButtonBase.js b/components/lib/splitbutton/SplitButtonBase.js
index c2b1a2bd21..dc2cc93998 100644
--- a/components/lib/splitbutton/SplitButtonBase.js
+++ b/components/lib/splitbutton/SplitButtonBase.js
@@ -19,6 +19,12 @@ export const SplitButtonBase = {
         buttonProps: null,
         menuButtonProps: null,
         tabIndex: null,
+        severity: null,
+        rounded: false,
+        raised: false,
+        outlined: false,
+        text: false,
+        size: null,
         appendTo: null,
         tooltip: null,
         tooltipOptions: null,
diff --git a/components/lib/splitbutton/splitbutton.d.ts b/components/lib/splitbutton/splitbutton.d.ts
index c03e4e9074..c473b198d2 100644
--- a/components/lib/splitbutton/splitbutton.d.ts
+++ b/components/lib/splitbutton/splitbutton.d.ts
@@ -26,6 +26,34 @@ export interface SplitButtonProps extends Omit<React.DetailedHTMLProps<React.HTM
      * Name of the icon.
      */
     icon?: IconType<SplitButtonProps> | undefined;
+    /**
+     * Add a textual class to the button without a background initially.
+     * @defaultValue false
+     */
+    text?: boolean | undefined;
+    /**
+     * Add a circular border radius to the button.
+     * @defaultValue false
+     */
+    rounded?: boolean | undefined;
+    /**
+     * Add a shadow to indicate elevation.
+     * @defaultValue false
+     */
+    raised?: boolean | undefined;
+    /**
+     * Add a border class without a background initially.
+     * @defaultValue false
+     */
+    outlined?: boolean | undefined;
+    /**
+     * Defines the style of the button, valid values are "secondary", "success", "info", "warning", "danger".
+     */
+    severity?: 'secondary' | 'success' | 'info' | 'warning' | 'danger' | undefined;
+    /**
+     * Defines the size of the button, valid values are "small" and "large".
+     */
+    size?: 'small' | 'large' | undefined;
     /**
      * Display loading icon of the button
      * @defaultValue false