diff --git a/src/app/components/button/button.ts b/src/app/components/button/button.ts
index e44c9df85d0..3237ce4087c 100755
--- a/src/app/components/button/button.ts
+++ b/src/app/components/button/button.ts
@@ -320,6 +320,46 @@ export class Button implements AfterContentInit {
      * @group Props
      */
     @Input() loadingIcon: string | undefined;
+    /**
+     * Add a shadow to indicate elevation.
+     * @group Props
+     */
+    @Input() raised: boolean = false;
+    /**
+     * Add a circular border radius to the button.
+     * @group Props
+     */
+    @Input() rounded: boolean = false;
+    /**
+     * Add a textual class to the button without a background initially.
+     * @group Props
+     */
+    @Input() text: boolean = false;
+    /**
+     * Add a plain textual class to the button without a background initially.
+     * @group Props
+     */
+    @Input() plain: boolean = false;
+    /**
+     * Defines the style of the button.
+     * @group Props
+     */
+    @Input() severity: 'secondary' | 'success' | 'info' | 'warning' | 'help' | 'danger' | string | undefined;
+    /**
+     * Add a border class without a background initially.
+     * @group Props
+     */
+    @Input() outlined: boolean = false;
+    /**
+     *  Add a link style to the button.
+     * @group Props
+     */
+    @Input() link: boolean = false;
+    /**
+     * Defines the size of the button.
+     * @group Props
+     */
+    @Input() size: 'small' | 'large' | undefined;
     /**
      * Inline style of the element.
      * @group Props
@@ -393,7 +433,16 @@ export class Button implements AfterContentInit {
             'p-button-vertical': (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label,
             'p-disabled': this.disabled || this.loading,
             'p-button-loading': this.loading,
-            'p-button-loading-label-only': this.loading && !this.icon && this.label && !this.loadingIcon && this.iconPos === 'left'
+            'p-button-loading-label-only': this.loading && !this.icon && this.label && !this.loadingIcon && this.iconPos === 'left',
+            'p-button-link': this.link,
+            [`p-button-${this.severity}`]: this.severity,
+            'p-button-raised': this.raised,
+            'p-button-rounded': this.rounded,
+            'p-button-text': this.text,
+            'p-button-outlined': this.outlined,
+            'p-button-sm': this.size === 'small',
+            'p-button-lg': this.size === 'large',
+            'p-button-plain': this.plain
         };
     }
 
diff --git a/src/app/showcase/doc/button/linkdoc.ts b/src/app/showcase/doc/button/linkdoc.ts
index bfcd1cb87bb..f78aad9e69c 100644
--- a/src/app/showcase/doc/button/linkdoc.ts
+++ b/src/app/showcase/doc/button/linkdoc.ts
@@ -8,7 +8,7 @@ import { Code } from '../../domain/code';
             <p>A button can be rendered as a link as well.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-button label="Submit" styleClass="p-button-link"></p-button>
+            <p-button label="Submit" [link]="true"></p-button>
         </div>
         <app-code [code]="code" selector="button-link-demo"></app-code>
     </section>`
@@ -20,11 +20,11 @@ export class LinkDoc {
 
     code: Code = {
         basic: `
-<p-button label="Submit" styleClass="p-button-link"></p-button>`,
+<p-button label="Submit" [link]="true"></p-button>`,
 
         html: `
 <div class="card flex justify-content-center">
-    <p-button label="Submit" styleClass="p-button-link"></p-button>
+    <p-button label="Submit" [link]="true"></p-button>
 </div>`,
 
         typescript: `
diff --git a/src/app/showcase/doc/button/outlineddoc.ts b/src/app/showcase/doc/button/outlineddoc.ts
index bd7e9b211a7..a1b03dd0ba0 100644
--- a/src/app/showcase/doc/button/outlineddoc.ts
+++ b/src/app/showcase/doc/button/outlineddoc.ts
@@ -8,13 +8,13 @@ import { Code } from '../../domain/code';
             <p>Outlined buttons display a border without a background initially.</p>
         </app-docsectiontext>
         <div class="card flex flex-wrap gap-3 justify-content-center">
-            <p-button label="Primary" styleClass="p-button-outlined"></p-button>
-            <p-button label="Secondary" styleClass="p-button-outlined p-button-secondary"></p-button>
-            <p-button label="Success" styleClass="p-button-outlined p-button-success"></p-button>
-            <p-button label="Info" styleClass="p-button-outlined p-button-info"></p-button>
-            <p-button label="Warning" styleClass="p-button-outlined p-button-warning"></p-button>
-            <p-button label="Help" styleClass="p-button-outlined p-button-help"></p-button>
-            <p-button label="Danger" styleClass="p-button-outlined p-button-danger"></p-button>
+            <p-button label="Primary" [outlined]="true"></p-button>
+            <p-button label="Secondary" [outlined]="true" severity="secondary"></p-button>
+            <p-button label="Success" [outlined]="true" severity="success"></p-button>
+            <p-button label="Info" [outlined]="true" severity="info"></p-button>
+            <p-button label="Warning" [outlined]="true" severity="warning"></p-button>
+            <p-button label="Help" [outlined]="true" severity="help"></p-button>
+            <p-button label="Danger" [outlined]="true" severity="danger"></p-button>
         </div>
         <app-code [code]="code" selector="button-outlined-demo"></app-code>
     </section>`
@@ -26,23 +26,23 @@ export class OutlinedDoc {
 
     code: Code = {
         basic: `
-<p-button label="Primary" styleClass="p-button-outlined"></p-button>
-<p-button label="Secondary" styleClass="p-button-outlined p-button-secondary"></p-button>
-<p-button label="Success" styleClass="p-button-outlined p-button-success"></p-button>
-<p-button label="Info" styleClass="p-button-outlined p-button-info"></p-button>
-<p-button label="Warning" styleClass="p-button-outlined p-button-warning"></p-button>
-<p-button label="Help" styleClass="p-button-outlined p-button-help"></p-button>
-<p-button label="Danger" styleClass="p-button-outlined p-button-danger"></p-button>`,
+<p-button label="Primary" [outlined]="true"></p-button>
+<p-button label="Secondary" [outlined]="true" severity="secondary"></p-button>
+<p-button label="Success" [outlined]="true" severity="success"></p-button>
+<p-button label="Info" [outlined]="true" severity="info"></p-button>
+<p-button label="Warning" [outlined]="true" severity="warning"></p-button>
+<p-button label="Help" [outlined]="true" severity="help"></p-button>
+<p-button label="Danger" [outlined]="true" severity="danger"></p-button>`,
 
         html: `
 <div class="card flex flex-wrap gap-3 justify-content-center">
-    <p-button label="Primary" styleClass="p-button-outlined"></p-button>
-    <p-button label="Secondary" styleClass="p-button-outlined p-button-secondary"></p-button>
-    <p-button label="Success" styleClass="p-button-outlined p-button-success"></p-button>
-    <p-button label="Info" styleClass="p-button-outlined p-button-info"></p-button>
-    <p-button label="Warning" styleClass="p-button-outlined p-button-warning"></p-button>
-    <p-button label="Help" styleClass="p-button-outlined p-button-help"></p-button>
-    <p-button label="Danger" styleClass="p-button-outlined p-button-danger"></p-button>
+    <p-button label="Primary" [outlined]="true"></p-button>
+    <p-button label="Secondary" [outlined]="true" severity="secondary"></p-button>
+    <p-button label="Success" [outlined]="true" severity="success"></p-button>
+    <p-button label="Info" [outlined]="true" severity="info"></p-button>
+    <p-button label="Warning" [outlined]="true" severity="warning"></p-button>
+    <p-button label="Help" [outlined]="true" severity="help"></p-button>
+    <p-button label="Danger" [outlined]="true" severity="danger"></p-button>
 </div>`,
 
         typescript: `
diff --git a/src/app/showcase/doc/button/raiseddoc.ts b/src/app/showcase/doc/button/raiseddoc.ts
index a2dc8b90ecd..8b35015b4f3 100644
--- a/src/app/showcase/doc/button/raiseddoc.ts
+++ b/src/app/showcase/doc/button/raiseddoc.ts
@@ -8,13 +8,13 @@ import { Code } from '../../domain/code';
             <p>Raised buttons display a shadow to indicate elevation.</p>
         </app-docsectiontext>
         <div class="card flex flex-wrap gap-3 justify-content-center">
-            <p-button label="Primary" styleClass="p-button-raised"></p-button>
-            <p-button label="Secondary" styleClass="p-button-raised p-button-secondary"></p-button>
-            <p-button label="Success" styleClass="p-button-raised p-button-success"></p-button>
-            <p-button label="Info" styleClass="p-button-raised p-button-info"></p-button>
-            <p-button label="Warning" styleClass="p-button-raised p-button-warning"></p-button>
-            <p-button label="Help" styleClass="p-button-raised p-button-help"></p-button>
-            <p-button label="Danger" styleClass="p-button-raised p-button-danger"></p-button>
+            <p-button label="Primary" [raised]="true"></p-button>
+            <p-button label="Secondary" [raised]="true" severity="secondary"></p-button>
+            <p-button label="Success" [raised]="true" severity="success"></p-button>
+            <p-button label="Info" [raised]="true" severity="info"></p-button>
+            <p-button label="Warning" [raised]="true" severity="warning"></p-button>
+            <p-button label="Help" [raised]="true" severity="help"></p-button>
+            <p-button label="Danger" [raised]="true" severity="danger"></p-button>
         </div>
         <app-code [code]="code" selector="button-raised-demo"></app-code>
     </section>`
@@ -26,23 +26,23 @@ export class RaisedDoc {
 
     code: Code = {
         basic: `
-<p-button label="Primary" styleClass="p-button-raised"></p-button>
-<p-button label="Secondary" styleClass="p-button-raised p-button-secondary"></p-button>
-<p-button label="Success" styleClass="p-button-raised p-button-success"></p-button>
-<p-button label="Info" styleClass="p-button-raised p-button-info"></p-button>
-<p-button label="Warning" styleClass="p-button-raised p-button-warning"></p-button>
-<p-button label="Help" styleClass="p-button-raised p-button-help"></p-button>
-<p-button label="Danger" styleClass="p-button-raised p-button-danger"></p-button>`,
+<p-button label="Primary" [raised]="true"></p-button>
+<p-button label="Secondary" [raised]="true" severity="secondary"></p-button>
+<p-button label="Success" [raised]="true" severity="success"></p-button>
+<p-button label="Info" [raised]="true" severity="info"></p-button>
+<p-button label="Warning" [raised]="true" severity="warning"></p-button>
+<p-button label="Help" [raised]="true" severity="help"></p-button>
+<p-button label="Danger" [raised]="true" severity="danger"></p-button>`,
 
         html: `
 <div class="card flex flex-wrap gap-3 justify-content-center">
-    <p-button label="Primary" styleClass="p-button-raised"></p-button>
-    <p-button label="Secondary" styleClass="p-button-raised p-button-secondary"></p-button>
-    <p-button label="Success" styleClass="p-button-raised p-button-success"></p-button>
-    <p-button label="Info" styleClass="p-button-raised p-button-info"></p-button>
-    <p-button label="Warning" styleClass="p-button-raised p-button-warning"></p-button>
-    <p-button label="Help" styleClass="p-button-raised p-button-help"></p-button>
-    <p-button label="Danger" styleClass="p-button-raised p-button-danger"></p-button>
+    <p-button label="Primary" [raised]="true"></p-button>
+    <p-button label="Secondary" [raised]="true" severity="secondary"></p-button>
+    <p-button label="Success" [raised]="true" severity="success"></p-button>
+    <p-button label="Info" [raised]="true" severity="info"></p-button>
+    <p-button label="Warning" [raised]="true" severity="warning"></p-button>
+    <p-button label="Help" [raised]="true" severity="help"></p-button>
+    <p-button label="Danger" [raised]="true" severity="danger"></p-button>
 </div>`,
 
         typescript: `
diff --git a/src/app/showcase/doc/button/raisedtextdoc.ts b/src/app/showcase/doc/button/raisedtextdoc.ts
index 68419cad4e7..59312a59125 100644
--- a/src/app/showcase/doc/button/raisedtextdoc.ts
+++ b/src/app/showcase/doc/button/raisedtextdoc.ts
@@ -8,13 +8,14 @@ import { Code } from '../../domain/code';
             <p>Text buttons can be displayed as raised for elevation.</p>
         </app-docsectiontext>
         <div class="card flex flex-wrap gap-3 justify-content-center">
-            <p-button label="Primary" styleClass="p-button-raised p-button-text"></p-button>
-            <p-button label="Secondary" styleClass="p-button-raised p-button-text p-button-secondary"></p-button>
-            <p-button label="Success" styleClass="p-button-raised p-button-text p-button-success"></p-button>
-            <p-button label="Info" styleClass="p-button-raised p-button-text p-button-info"></p-button>
-            <p-button label="Warning" styleClass="p-button-raised p-button-text p-button-warning"></p-button>
-            <p-button label="Help" styleClass="p-button-raised p-button-text p-button-help"></p-button>
-            <p-button label="Danger" styleClass="p-button-raised p-button-text p-button-danger"></p-button>
+            <p-button label="Primary" [text]="true" [raised]="true"></p-button>
+            <p-button label="Secondary" [text]="true" [raised]="true" severity="secondary"></p-button>
+            <p-button label="Success" [text]="true" [raised]="true" severity="success"></p-button>
+            <p-button label="Info" [text]="true" [raised]="true" severity="info"></p-button>
+            <p-button label="Warning" [text]="true" [raised]="true" severity="warning"></p-button>
+            <p-button label="Help" [text]="true" [raised]="true" severity="help"></p-button>
+            <p-button label="Danger" [text]="true" [raised]="true" severity="danger"></p-button>
+            <p-button label="Plain" [text]="true" [raised]="true" [plain]="true"></p-button>
         </div>
         <app-code [code]="code" selector="button-raisedtext-demo"></app-code>
     </section>`
@@ -26,23 +27,25 @@ export class RaisedTextDoc {
 
     code: Code = {
         basic: `
-<p-button label="Primary" styleClass="p-button-raised p-button-text"></p-button>
-<p-button label="Secondary" styleClass="p-button-raised p-button-text p-button-secondary"></p-button>
-<p-button label="Success" styleClass="p-button-raised p-button-text p-button-success"></p-button>
-<p-button label="Info" styleClass="p-button-raised p-button-text p-button-info"></p-button>
-<p-button label="Warning" styleClass="p-button-raised p-button-text p-button-warning"></p-button>
-<p-button label="Help" styleClass="p-button-raised p-button-text p-button-help"></p-button>
-<p-button label="Danger" styleClass="p-button-raised p-button-text p-button-danger"></p-button>`,
+<p-button label="Primary" [text]="true" [raised]="true"></p-button>
+<p-button label="Secondary" [text]="true" [raised]="true" severity="secondary"></p-button>
+<p-button label="Success" [text]="true" [raised]="true" severity="success"></p-button>
+<p-button label="Info" [text]="true" [raised]="true" severity="info"></p-button>
+<p-button label="Warning" [text]="true" [raised]="true" severity="warning"></p-button>
+<p-button label="Help" [text]="true" [raised]="true" severity="help"></p-button>
+<p-button label="Danger" [text]="true" [raised]="true" severity="danger"></p-button>
+<p-button label="Plain" [text]="true" [raised]="true" [plain]="true"></p-button>`,
 
         html: `
 <div class="card flex flex-wrap gap-3 justify-content-center">
-    <p-button label="Primary" styleClass="p-button-raised p-button-text"></p-button>
-    <p-button label="Secondary" styleClass="p-button-raised p-button-text p-button-secondary"></p-button>
-    <p-button label="Success" styleClass="p-button-raised p-button-text p-button-success"></p-button>
-    <p-button label="Info" styleClass="p-button-raised p-button-text p-button-info"></p-button>
-    <p-button label="Warning" styleClass="p-button-raised p-button-text p-button-warning"></p-button>
-    <p-button label="Help" styleClass="p-button-raised p-button-text p-button-help"></p-button>
-    <p-button label="Danger" styleClass="p-button-raised p-button-text p-button-danger"></p-button>
+    <p-button label="Primary" [text]="true" [raised]="true"></p-button>
+    <p-button label="Secondary" [text]="true" [raised]="true" severity="secondary"></p-button>
+    <p-button label="Success" [text]="true" [raised]="true" severity="success"></p-button>
+    <p-button label="Info" [text]="true" [raised]="true" severity="info"></p-button>
+    <p-button label="Warning" [text]="true" [raised]="true" severity="warning"></p-button>
+    <p-button label="Help" [text]="true" [raised]="true" severity="help"></p-button>
+    <p-button label="Danger" [text]="true" [raised]="true" severity="danger"></p-button>
+    <p-button label="Plain" [text]="true" [raised]="true" [plain]="true"></p-button>
 </div>`,
 
         typescript: `
diff --git a/src/app/showcase/doc/button/roundeddoc.ts b/src/app/showcase/doc/button/roundeddoc.ts
index f951e16385a..716a03dfc42 100644
--- a/src/app/showcase/doc/button/roundeddoc.ts
+++ b/src/app/showcase/doc/button/roundeddoc.ts
@@ -8,13 +8,13 @@ import { Code } from '../../domain/code';
             <p>Rounded buttons have a circular border radius.</p>
         </app-docsectiontext>
         <div class="card flex flex-wrap gap-3 justify-content-center">
-            <p-button label="Primary" styleClass="p-button-rounded"></p-button>
-            <p-button label="Secondary" styleClass="p-button-rounded p-button-secondary"></p-button>
-            <p-button label="Success" styleClass="p-button-rounded p-button-success"></p-button>
-            <p-button label="Info" styleClass="p-button-rounded p-button-info"></p-button>
-            <p-button label="Warning" styleClass="p-button-rounded p-button-warning"></p-button>
-            <p-button label="Help" styleClass="p-button-rounded p-button-help"></p-button>
-            <p-button label="Danger" styleClass="p-button-rounded p-button-danger"></p-button>
+            <p-button label="Primary" [rounded]="true"></p-button>
+            <p-button label="Secondary" [rounded]="true" severity="secondary"></p-button>
+            <p-button label="Success" [rounded]="true" severity="success"></p-button>
+            <p-button label="Info" [rounded]="true" severity="info"></p-button>
+            <p-button label="Warning" [rounded]="true" severity="warning"></p-button>
+            <p-button label="Help" [rounded]="true" severity="help"></p-button>
+            <p-button label="Danger" [rounded]="true" severity="danger"></p-button>
         </div>
         <app-code [code]="code" selector="button-rounded-demo"></app-code>
     </section>`
@@ -26,23 +26,23 @@ export class RoundedDoc {
 
     code: Code = {
         basic: `
-<p-button label="Primary" styleClass="p-button-rounded"></p-button>
-<p-button label="Secondary" styleClass="p-button-rounded p-button-secondary"></p-button>
-<p-button label="Success" styleClass="p-button-rounded p-button-success"></p-button>
-<p-button label="Info" styleClass="p-button-rounded p-button-info"></p-button>
-<p-button label="Warning" styleClass="p-button-rounded p-button-warning"></p-button>
-<p-button label="Help" styleClass="p-button-rounded p-button-help"></p-button>
-<p-button label="Danger" styleClass="p-button-rounded p-button-danger"></p-button>`,
+<p-button label="Primary" [rounded]="true"></p-button>
+<p-button label="Secondary" [rounded]="true" severity="secondary"></p-button>
+<p-button label="Success" [rounded]="true" severity="success"></p-button>
+<p-button label="Info" [rounded]="true" severity="info"></p-button>
+<p-button label="Warning" [rounded]="true" severity="warning"></p-button>
+<p-button label="Help" [rounded]="true" severity="help"></p-button>
+<p-button label="Danger" [rounded]="true" severity="danger"></p-button>`,
 
         html: `
 <div class="card flex flex-wrap gap-3 justify-content-center">
-    <p-button label="Primary" styleClass="p-button-rounded"></p-button>
-    <p-button label="Secondary" styleClass="p-button-rounded p-button-secondary"></p-button>
-    <p-button label="Success" styleClass="p-button-rounded p-button-success"></p-button>
-    <p-button label="Info" styleClass="p-button-rounded p-button-info"></p-button>
-    <p-button label="Warning" styleClass="p-button-rounded p-button-warning"></p-button>
-    <p-button label="Help" styleClass="p-button-rounded p-button-help"></p-button>
-    <p-button label="Danger" styleClass="p-button-rounded p-button-danger"></p-button>
+    <p-button label="Primary" [rounded]="true"></p-button>
+    <p-button label="Secondary" [rounded]="true" severity="secondary"></p-button>
+    <p-button label="Success" [rounded]="true" severity="success"></p-button>
+    <p-button label="Info" [rounded]="true" severity="info"></p-button>
+    <p-button label="Warning" [rounded]="true" severity="warning"></p-button>
+    <p-button label="Help" [rounded]="true" severity="help"></p-button>
+    <p-button label="Danger" [rounded]="true" severity="danger"></p-button>
 </div>`,
 
         typescript: `
diff --git a/src/app/showcase/doc/button/severitydoc.ts b/src/app/showcase/doc/button/severitydoc.ts
index c594945fb04..87b7ffc7995 100644
--- a/src/app/showcase/doc/button/severitydoc.ts
+++ b/src/app/showcase/doc/button/severitydoc.ts
@@ -9,12 +9,12 @@ import { Code } from '../../domain/code';
         </app-docsectiontext>
         <div class="card flex flex-wrap gap-3 justify-content-center">
             <p-button label="Primary"></p-button>
-            <p-button label="Secondary" styleClass="p-button-secondary"></p-button>
-            <p-button label="Success" styleClass="p-button-success"></p-button>
-            <p-button label="Info" styleClass="p-button-info"></p-button>
-            <p-button label="Warning" styleClass="p-button-warning"></p-button>
-            <p-button label="Help" styleClass="p-button-help"></p-button>
-            <p-button label="Danger" styleClass="p-button-danger"></p-button>
+            <p-button label="Secondary" severity="secondary"></p-button>
+            <p-button label="Success" severity="success"></p-button>
+            <p-button label="Info" severity="info"></p-button>
+            <p-button label="Warning" severity="warning"></p-button>
+            <p-button label="Help" severity="help"></p-button>
+            <p-button label="Danger" severity="danger"></p-button>
         </div>
         <app-code [code]="code" selector="button-severity-demo"></app-code>
     </section>`
@@ -27,22 +27,22 @@ export class SeverityDoc {
     code: Code = {
         basic: `
 <p-button label="Primary"></p-button>
-<p-button label="Secondary" styleClass="p-button-secondary"></p-button>
-<p-button label="Success" styleClass="p-button-success"></p-button>
-<p-button label="Info" styleClass="p-button-info"></p-button>
-<p-button label="Warning" styleClass="p-button-warning"></p-button>
-<p-button label="Help" styleClass="p-button-help"></p-button>
-<p-button label="Danger" styleClass="p-button-danger"></p-button>`,
+<p-button label="Secondary" severity="secondary"></p-button>
+<p-button label="Success" severity="success"></p-button>
+<p-button label="Info" severity="info"></p-button>
+<p-button label="Warning" severity="warning"></p-button>
+<p-button label="Help" severity="help"></p-button>
+<p-button label="Danger" severity="danger"></p-button>`,
 
         html: `
 <div class="card flex flex-wrap gap-3 justify-content-center">
     <p-button label="Primary"></p-button>
-    <p-button label="Secondary" styleClass="p-button-secondary"></p-button>
-    <p-button label="Success" styleClass="p-button-success"></p-button>
-    <p-button label="Info" styleClass="p-button-info"></p-button>
-    <p-button label="Warning" styleClass="p-button-warning"></p-button>
-    <p-button label="Help" styleClass="p-button-help"></p-button>
-    <p-button label="Danger" styleClass="p-button-danger"></p-button>
+    <p-button label="Secondary" severity="secondary"></p-button>
+    <p-button label="Success" severity="success"></p-button>
+    <p-button label="Info" severity="info"></p-button>
+    <p-button label="Warning" severity="warning"></p-button>
+    <p-button label="Help" severity="help"></p-button>
+    <p-button label="Danger" severity="danger"></p-button>
 </div>`,
 
         typescript: `
diff --git a/src/app/showcase/doc/button/sizesdoc.ts b/src/app/showcase/doc/button/sizesdoc.ts
index 04b0fdebbf1..139bceb5a67 100644
--- a/src/app/showcase/doc/button/sizesdoc.ts
+++ b/src/app/showcase/doc/button/sizesdoc.ts
@@ -8,9 +8,9 @@ import { Code } from '../../domain/code';
             <p>Button provides <i>small</i> and <i>large</i> sizes as alternatives to the standard.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center flex-wrap gap-3 align-items-center">
-            <p-button label="Small" icon="pi pi-check" styleClass="p-button-sm"></p-button>
-            <p-button label="Normal" icon="pi pi-check" styleClass="p-button"></p-button>
-            <p-button label="Large" icon="pi pi-check" styleClass="p-button-lg"></p-button>
+            <p-button label="Small" icon="pi pi-check" size="small"></p-button>
+            <p-button label="Normal" icon="pi pi-check"></p-button>
+            <p-button label="Large" icon="pi pi-check" size="large"></p-button>
         </div>
         <app-code [code]="code" selector="button-sizes-demo"></app-code>
     </section>`
@@ -22,15 +22,15 @@ export class SizesDoc {
 
     code: Code = {
         basic: `
-<p-button label="Small" icon="pi pi-check" styleClass="p-button-sm"></p-button>
-<p-button label="Normal" icon="pi pi-check" styleClass="p-button" ></p-button>
-<p-button label="Large" icon="pi pi-check" styleClass="p-button-lg"></p-button>`,
+<p-button label="Small" icon="pi pi-check" size="small"></p-button>
+<p-button label="Normal" icon="pi pi-check"></p-button>
+<p-button label="Large" icon="pi pi-check" size="large"></p-button>`,
 
         html: `
 <div class="card flex justify-content-center flex-wrap gap-3 align-items-center">
-    <p-button label="Small" icon="pi pi-check" styleClass="p-button-sm"></p-button>
-    <p-button label="Normal" icon="pi pi-check" styleClass="p-button" ></p-button>
-    <p-button label="Large" icon="pi pi-check" styleClass="p-button-lg"></p-button>
+    <p-button label="Small" icon="pi pi-check" size="small"></p-button>
+    <p-button label="Normal" icon="pi pi-check"></p-button>
+    <p-button label="Large" icon="pi pi-check" size="large"></p-button>
 </div>`,
 
         typescript: `
diff --git a/src/app/showcase/doc/button/templatedoc.ts b/src/app/showcase/doc/button/templatedoc.ts
index 66019ff6ca5..156e10e21cc 100644
--- a/src/app/showcase/doc/button/templatedoc.ts
+++ b/src/app/showcase/doc/button/templatedoc.ts
@@ -8,7 +8,7 @@ import { Code } from '../../domain/code';
             <p>Custom content inside a button is defined as children.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-button styleClass="p-button-outlined">
+            <p-button [outlined]="true">
                 <img alt="logo" src="https://primefaces.org/cdn/primeng/images/primeng-icon.svg" style="width: 1.5rem" />
                 <span class="ml-2 font-bold">PrimeNG</span>
             </p-button>
@@ -23,14 +23,14 @@ export class TemplateDoc {
 
     code: Code = {
         basic: `
-<p-button styleClass="p-button-outlined">
+<p-button [outlined]="true">
     <img alt="logo" src="https://primefaces.org/cdn/primeng/images/primeng-icon.svg" style="width: 1.5rem" />
     <span class="ml-2 font-bold">PrimeNG</span>
 </p-button>`,
 
         html: `
 <div class="card flex justify-content-center">
-    <p-button styleClass="p-button-outlined">
+    <p-button [outlined]="true">
         <img alt="logo" src="https://primefaces.org/cdn/primeng/images/primeng-icon.svg" style="width: 1.5rem" />
         <span class="ml-2 font-bold">PrimeNG</span>
     </p-button>
diff --git a/src/app/showcase/doc/button/textdoc.ts b/src/app/showcase/doc/button/textdoc.ts
index ee2dee3daac..dca11b7d1a8 100644
--- a/src/app/showcase/doc/button/textdoc.ts
+++ b/src/app/showcase/doc/button/textdoc.ts
@@ -8,13 +8,14 @@ import { Code } from '../../domain/code';
             <p>Text buttons are displayed as textual elements.</p>
         </app-docsectiontext>
         <div class="card flex flex-wrap gap-3 justify-content-center">
-            <p-button label="Primary" styleClass="p-button-text"></p-button>
-            <p-button label="Secondary" styleClass="p-button-secondary p-button-text"></p-button>
-            <p-button label="Success" styleClass="p-button-success p-button-text"></p-button>
-            <p-button label="Info" styleClass="p-button-info p-button-text"></p-button>
-            <p-button label="Warning" styleClass="p-button-warning p-button-text"></p-button>
-            <p-button label="Help" styleClass="p-button-help p-button-text"></p-button>
-            <p-button label="Danger" styleClass="p-button-danger p-button-text"></p-button>
+            <p-button label="Primary" [text]="true"></p-button>
+            <p-button label="Secondary" [text]="true" severity="secondary"></p-button>
+            <p-button label="Success" [text]="true" severity="success"></p-button>
+            <p-button label="Info" [text]="true" severity="info"></p-button>
+            <p-button label="Warning" [text]="true" severity="warning"></p-button>
+            <p-button label="Help" [text]="true" severity="help"></p-button>
+            <p-button label="Danger" [text]="true" severity="danger"></p-button>
+            <p-button label="Plain" [text]="true" [plain]="true"></p-button>
         </div>
         <app-code [code]="code" selector="button-text-demo"></app-code>
     </section>`
@@ -26,23 +27,25 @@ export class TextDoc {
 
     code: Code = {
         basic: `
-<p-button label="Primary" styleClass="p-button-text"></p-button>
-<p-button label="Secondary" styleClass="p-button-secondary p-button-text"></p-button>
-<p-button label="Success" styleClass="p-button-success p-button-text"></p-button>
-<p-button label="Info" styleClass="p-button-info p-button-text"></p-button>
-<p-button label="Warning" styleClass="p-button-warning p-button-text"></p-button>
-<p-button label="Help" styleClass="p-button-help p-button-text"></p-button>
-<p-button label="Danger" styleClass="p-button-danger p-button-text"></p-button>`,
+<p-button label="Primary" [text]="true"></p-button>
+<p-button label="Secondary" [text]="true" severity="secondary"></p-button>
+<p-button label="Success" [text]="true" severity="success"></p-button>
+<p-button label="Info" [text]="true" severity="info"></p-button>
+<p-button label="Warning" [text]="true" severity="warning"></p-button>
+<p-button label="Help" [text]="true" severity="help"></p-button>
+<p-button label="Danger" [text]="true" severity="danger"></p-button>
+<p-button label="Plain" [text]="true" [plain]="true"></p-button>`,
 
         html: `
 <div class="card flex flex-wrap gap-3 justify-content-center">
-    <p-button label="Primary" styleClass="p-button-text"></p-button>
-    <p-button label="Secondary" styleClass="p-button-secondary p-button-text"></p-button>
-    <p-button label="Success" styleClass="p-button-success p-button-text"></p-button>
-    <p-button label="Info" styleClass="p-button-info p-button-text"></p-button>
-    <p-button label="Warning" styleClass="p-button-warning p-button-text"></p-button>
-    <p-button label="Help" styleClass="p-button-help p-button-text"></p-button>
-    <p-button label="Danger" styleClass="p-button-danger p-button-text"></p-button>
+    <p-button label="Primary" [text]="true"></p-button>
+    <p-button label="Secondary" [text]="true" severity="secondary"></p-button>
+    <p-button label="Success" [text]="true" severity="success"></p-button>
+    <p-button label="Info" [text]="true" severity="info"></p-button>
+    <p-button label="Warning" [text]="true" severity="warning"></p-button>
+    <p-button label="Help" [text]="true" severity="help"></p-button>
+    <p-button label="Danger" [text]="true" severity="danger"></p-button>
+    <p-button label="Plain" [text]="true" [plain]="true"></p-button>
 </div>`,
 
         typescript: `