primeng 20.3.0 → 21.0.0-rc.1

package/fesm2022/primeng-button.mjs

@@ -1,6 +1,6 @@
 export * from 'primeng/types/button';
 import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Injectable, InjectionToken, input, inject, effect, Directive, booleanAttribute, contentChild, computed, Input, EventEmitter, numberAttribute, ContentChildren, ContentChild, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { addClass, isEmpty, findSingle, createElement } from '@primeuix/utils';
@@ -21,9 +21,7 @@ const classes = {
     root: ({ instance }) => [
         'p-button p-component',
         {
-            'p-button-icon-only': (instance.icon || instance.buttonProps?.icon || instance.iconTemplate || instance._iconTemplate || instance.loadingIcon || instance.loadingIconTemplate || instance._loadingIconTemplate) &&
-                !instance.label &&
-                !instance.buttonProps?.label,
+            'p-button-icon-only': instance.hasIcon && !instance.label && !instance.buttonProps?.label && !instance.badge,
             'p-button-vertical': (instance.iconPos === 'top' || instance.iconPos === 'bottom') && instance.label,
             'p-button-loading': instance.loading || instance.buttonProps?.loading,
             'p-button-link': instance.link || instance.buttonProps?.link,
@@ -44,13 +42,15 @@ const classes = {
         {
             [`p-button-icon-${instance.iconPos || instance.buttonProps?.iconPos}`]: instance.label || instance.buttonProps?.label,
             'p-button-icon-left': ((instance.iconPos === 'left' || instance.buttonProps?.iconPos === 'left') && instance.label) || instance.buttonProps?.label,
-            'p-button-icon-right': ((instance.iconPos === 'right' || instance.buttonProps?.iconPos === 'right') && instance.label) || instance.buttonProps?.label
+            'p-button-icon-right': ((instance.iconPos === 'right' || instance.buttonProps?.iconPos === 'right') && instance.label) || instance.buttonProps?.label,
+            'p-button-icon-top': ((instance.iconPos === 'top' || instance.buttonProps?.iconPos === 'top') && instance.label) || instance.buttonProps?.label,
+            'p-button-icon-bottom': ((instance.iconPos === 'bottom' || instance.buttonProps?.iconPos === 'bottom') && instance.label) || instance.buttonProps?.label
         },
         instance.icon,
         instance.buttonProps?.icon
     ],
     spinnerIcon: ({ instance }) => {
-        return Object.entries(instance.iconClass())
+        return Object.entries(instance.cx('icon'))
             .filter(([, value]) => !!value)
             .reduce((acc, [key]) => acc + ` ${key}`, 'p-button-loading-icon');
     },
@@ -60,10 +60,10 @@ class ButtonStyle extends BaseStyle {
     name = 'button';
     style = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -108,61 +108,105 @@ const INTERNAL_BUTTON_CLASSES = {
     labelOnly: 'p-button-loading-label-only'
 };
 class ButtonLabel extends BaseComponent {
-    ptButtonLabel = input(...(ngDevMode ? [undefined, { debugName: "ptButtonLabel" }] : []));
+    /**
+     * Used to pass attributes to DOM elements inside the pButtonLabel.
+     * @defaultValue undefined
+     * @deprecated use pButtonLabelPT instead.
+     * @group Props
+     */
+    ptButtonLabel = input(undefined, { ...(ngDevMode ? { debugName: "ptButtonLabel" } : {}) });
+    /**
+     * Used to pass attributes to DOM elements inside the pButtonLabel.
+     * @defaultValue undefined
+     * @group Props
+     */
+    pButtonLabelPT = input(undefined, { ...(ngDevMode ? { debugName: "pButtonLabelPT" } : {}) });
+    /**
+     * Indicates whether the component should be rendered without styles.
+     * @defaultValue undefined
+     * @group Props
+     */
+    pButtonLabelUnstyled = input(undefined, { ...(ngDevMode ? { debugName: "pButtonLabelUnstyled" } : {}) });
     $pcButtonLabel = inject(BUTTON_LABEL_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
     bindDirectiveInstance = inject(Bind, { self: true });
     constructor() {
         super();
         effect(() => {
-            this.ptButtonLabel() && this.directivePT.set(this.ptButtonLabel());
+            const pt = this.ptButtonLabel() || this.pButtonLabelPT();
+            pt && this.directivePT.set(pt);
+        });
+        effect(() => {
+            this.pButtonLabelUnstyled() && this.directiveUnstyled.set(this.pButtonLabelUnstyled());
         });
     }
     onAfterViewChecked() {
         this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.4", type: ButtonLabel, isStandalone: true, selector: "[pButtonLabel]", inputs: { ptButtonLabel: { classPropertyName: "ptButtonLabel", publicName: "ptButtonLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.p-button-label": "true" } }, providers: [ButtonStyle, { provide: BUTTON_LABEL_INSTANCE, useExisting: ButtonLabel }, { provide: PARENT_INSTANCE, useExisting: ButtonLabel }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", type: ButtonLabel, isStandalone: true, selector: "[pButtonLabel]", inputs: { ptButtonLabel: { classPropertyName: "ptButtonLabel", publicName: "ptButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, pButtonLabelPT: { classPropertyName: "pButtonLabelPT", publicName: "pButtonLabelPT", isSignal: true, isRequired: false, transformFunction: null }, pButtonLabelUnstyled: { classPropertyName: "pButtonLabelUnstyled", publicName: "pButtonLabelUnstyled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.p-button-label": "!$unstyled() && true" } }, providers: [ButtonStyle, { provide: BUTTON_LABEL_INSTANCE, useExisting: ButtonLabel }, { provide: PARENT_INSTANCE, useExisting: ButtonLabel }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonLabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonLabel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pButtonLabel]',
                     providers: [ButtonStyle, { provide: BUTTON_LABEL_INSTANCE, useExisting: ButtonLabel }, { provide: PARENT_INSTANCE, useExisting: ButtonLabel }],
                     standalone: true,
                     host: {
-                        '[class.p-button-label]': 'true'
+                        '[class.p-button-label]': '!$unstyled() && true'
                     },
                     hostDirectives: [Bind]
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { ptButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ptButtonLabel", required: false }] }], pButtonLabelPT: [{ type: i0.Input, args: [{ isSignal: true, alias: "pButtonLabelPT", required: false }] }], pButtonLabelUnstyled: [{ type: i0.Input, args: [{ isSignal: true, alias: "pButtonLabelUnstyled", required: false }] }] } });
 class ButtonIcon extends BaseComponent {
-    ptButtonIcon = input(...(ngDevMode ? [undefined, { debugName: "ptButtonIcon" }] : []));
+    /**
+     * Used to pass attributes to DOM elements inside the pButtonIcon.
+     * @defaultValue undefined
+     * @deprecated use pButtonIconPT instead.
+     * @group Props
+     */
+    ptButtonIcon = input(undefined, { ...(ngDevMode ? { debugName: "ptButtonIcon" } : {}) });
+    /**
+     * Used to pass attributes to DOM elements inside the pButtonIcon.
+     * @defaultValue undefined
+     * @group Props
+     */
+    pButtonIconPT = input(undefined, { ...(ngDevMode ? { debugName: "pButtonIconPT" } : {}) });
+    /**
+     * Indicates whether the component should be rendered without styles.
+     * @defaultValue undefined
+     * @group Props
+     */
+    pButtonUnstyled = input(undefined, { ...(ngDevMode ? { debugName: "pButtonUnstyled" } : {}) });
     $pcButtonIcon = inject(BUTTON_ICON_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
     bindDirectiveInstance = inject(Bind, { self: true });
     constructor() {
         super();
         effect(() => {
-            this.ptButtonIcon() && this.directivePT.set(this.ptButtonIcon());
+            const pt = this.ptButtonIcon() || this.pButtonIconPT();
+            pt && this.directivePT.set(pt);
+        });
+        effect(() => {
+            this.pButtonUnstyled() && this.directiveUnstyled.set(this.pButtonUnstyled());
         });
     }
     onAfterViewChecked() {
         this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.4", type: ButtonIcon, isStandalone: true, selector: "[pButtonIcon]", inputs: { ptButtonIcon: { classPropertyName: "ptButtonIcon", publicName: "ptButtonIcon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.p-button-icon": "true" } }, providers: [ButtonStyle, { provide: BUTTON_ICON_INSTANCE, useExisting: ButtonIcon }, { provide: PARENT_INSTANCE, useExisting: ButtonIcon }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", type: ButtonIcon, isStandalone: true, selector: "[pButtonIcon]", inputs: { ptButtonIcon: { classPropertyName: "ptButtonIcon", publicName: "ptButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, pButtonIconPT: { classPropertyName: "pButtonIconPT", publicName: "pButtonIconPT", isSignal: true, isRequired: false, transformFunction: null }, pButtonUnstyled: { classPropertyName: "pButtonUnstyled", publicName: "pButtonUnstyled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.p-button-icon": "!$unstyled() && true" } }, providers: [ButtonStyle, { provide: BUTTON_ICON_INSTANCE, useExisting: ButtonIcon }, { provide: PARENT_INSTANCE, useExisting: ButtonIcon }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pButtonIcon]',
                     providers: [ButtonStyle, { provide: BUTTON_ICON_INSTANCE, useExisting: ButtonIcon }, { provide: PARENT_INSTANCE, useExisting: ButtonIcon }],
                     standalone: true,
                     host: {
-                        '[class.p-button-icon]': 'true'
+                        '[class.p-button-icon]': '!$unstyled() && true'
                     },
                     hostDirectives: [Bind]
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { ptButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "ptButtonIcon", required: false }] }], pButtonIconPT: [{ type: i0.Input, args: [{ isSignal: true, alias: "pButtonIconPT", required: false }] }], pButtonUnstyled: [{ type: i0.Input, args: [{ isSignal: true, alias: "pButtonUnstyled", required: false }] }] } });
 /**
  * Button directive is an extension to button component.
  * @group Components
@@ -171,7 +215,25 @@ class ButtonDirective extends BaseComponent {
     $pcButtonDirective = inject(BUTTON_DIRECTIVE_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
     bindDirectiveInstance = inject(Bind, { self: true });
     _componentStyle = inject(ButtonStyle);
-    ptButtonDirective = input(...(ngDevMode ? [undefined, { debugName: "ptButtonDirective" }] : []));
+    /**
+     * Used to pass attributes to DOM elements inside the Button component.
+     * @defaultValue undefined
+     * @deprecated use pButtonPT instead.
+     * @group Props
+     */
+    ptButtonDirective = input(undefined, { ...(ngDevMode ? { debugName: "ptButtonDirective" } : {}) });
+    /**
+     * Used to pass attributes to DOM elements inside the Button component.
+     * @defaultValue undefined
+     * @group Props
+     */
+    pButtonPT = input(undefined, { ...(ngDevMode ? { debugName: "pButtonPT" } : {}) });
+    /**
+     * Indicates whether the component should be rendered without styles.
+     * @defaultValue undefined
+     * @group Props
+     */
+    pButtonUnstyled = input(undefined, { ...(ngDevMode ? { debugName: "pButtonUnstyled" } : {}) });
     hostName = '';
     onAfterViewChecked() {
         this.bindDirectiveInstance.setAttrs(this.ptm('root'));
@@ -179,7 +241,17 @@ class ButtonDirective extends BaseComponent {
     constructor() {
         super();
         effect(() => {
-            this.ptButtonDirective() && this.directivePT.set(this.ptButtonDirective());
+            const pt = this.ptButtonDirective() || this.pButtonPT();
+            pt && this.directivePT.set(pt);
+        });
+        effect(() => {
+            this.pButtonUnstyled() && this.directiveUnstyled.set(this.pButtonUnstyled());
+        });
+        effect(() => {
+            const unstyled = this.$unstyled();
+            if (this.initialized && unstyled) {
+                this.setStyleClass();
+            }
         });
     }
     /**
@@ -227,10 +299,10 @@ class ButtonDirective extends BaseComponent {
      * @defaultValue undefined
      * @group Props
      */
-    fluid = input(undefined, ...(ngDevMode ? [{ debugName: "fluid", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    iconSignal = contentChild(ButtonIcon, ...(ngDevMode ? [{ debugName: "iconSignal" }] : []));
-    labelSignal = contentChild(ButtonLabel, ...(ngDevMode ? [{ debugName: "labelSignal" }] : []));
-    isIconOnly = computed(() => !!(!this.labelSignal() && this.iconSignal()), ...(ngDevMode ? [{ debugName: "isIconOnly" }] : []));
+    fluid = input(undefined, { ...(ngDevMode ? { debugName: "fluid" } : {}), transform: booleanAttribute });
+    iconSignal = contentChild(ButtonIcon, { ...(ngDevMode ? { debugName: "iconSignal" } : {}) });
+    labelSignal = contentChild(ButtonLabel, { ...(ngDevMode ? { debugName: "labelSignal" } : {}) });
+    isIconOnly = computed(() => !!(!this.labelSignal() && this.iconSignal()), { ...(ngDevMode ? { debugName: "isIconOnly" } : {}) });
     _label;
     _icon;
     _loading = false;
@@ -242,7 +314,7 @@ class ButtonDirective extends BaseComponent {
     }
     _internalClasses = Object.values(INTERNAL_BUTTON_CLASSES);
     pcFluid = inject(Fluid, { optional: true, host: true, skipSelf: true });
-    isTextButton = computed(() => !!(!this.iconSignal() && this.labelSignal() && this.text), ...(ngDevMode ? [{ debugName: "isTextButton" }] : []));
+    isTextButton = computed(() => !!(!this.iconSignal() && this.labelSignal() && this.text), { ...(ngDevMode ? { debugName: "isTextButton" } : {}) });
     /**
      * Text of the button.
      * @deprecated use pButtonLabel directive instead.
@@ -330,10 +402,12 @@ class ButtonDirective extends BaseComponent {
         </defs>
     </svg>`;
     onAfterViewInit() {
-        addClass(this.htmlElement, this.getStyleClass().join(' '));
-        this.createIcon();
-        this.createLabel();
-        this.initialized = true;
+        !this.$unstyled() && addClass(this.htmlElement, this.getStyleClass().join(' '));
+        if (isPlatformBrowser(this.platformId)) {
+            this.createIcon();
+            this.createLabel();
+            this.initialized = true;
+        }
     }
     getStyleClass() {
         const styleClass = [INTERNAL_BUTTON_CLASSES.button, INTERNAL_BUTTON_CLASSES.component];
@@ -379,7 +453,7 @@ class ButtonDirective extends BaseComponent {
         if (this.hasFluid) {
             styleClass.push('p-button-fluid');
         }
-        return styleClass;
+        return this.$unstyled() ? [] : styleClass;
     }
     get hasFluid() {
         return this.fluid() ?? !!this.pcFluid;
@@ -398,19 +472,19 @@ class ButtonDirective extends BaseComponent {
         }
     }
     createLabel() {
-        const created = findSingle(this.htmlElement, '.p-button-label');
+        const created = findSingle(this.htmlElement, '[data-pc-section="buttonlabel"]');
         if (!created && this.label) {
-            let labelElement = createElement('span', { class: this.cx('label'), 'p-bind': this.ptm('label'), 'aria-hidden': this.icon && !this.label ? 'true' : null });
+            let labelElement = createElement('span', { class: this.cx('label'), 'p-bind': this.ptm('buttonlabel'), 'aria-hidden': this.icon && !this.label ? 'true' : null });
             labelElement.appendChild(this.document.createTextNode(this.label));
             this.htmlElement.appendChild(labelElement);
         }
     }
     createIcon() {
-        const created = findSingle(this.htmlElement, '.p-button-icon');
+        const created = findSingle(this.htmlElement, '[data-pc-section="buttonicon"]');
         if (!created && (this.icon || this.loading)) {
-            let iconPosClass = this.label ? 'p-button-icon-' + this.iconPos : null;
-            let iconClass = this.getIconClass();
-            let iconElement = createElement('span', { class: this.cn(this.cx('icon'), iconPosClass, iconClass), 'aria-hidden': 'true', 'p-bind': this.ptm('icon') });
+            let iconPosClass = this.label && !this.$unstyled() ? 'p-button-icon-' + this.iconPos : null;
+            let iconClass = !this.$unstyled() && this.getIconClass();
+            let iconElement = createElement('span', { class: this.cn(this.cx('icon'), iconPosClass, iconClass), 'aria-hidden': 'true', 'p-bind': this.ptm('buttonicon') });
             if (!this.loadingIcon && this.loading) {
                 iconElement.innerHTML = this.spinnerIcon;
             }
@@ -418,7 +492,7 @@ class ButtonDirective extends BaseComponent {
         }
     }
     updateLabel() {
-        let labelElement = findSingle(this.htmlElement, '.p-button-label');
+        let labelElement = findSingle(this.htmlElement, '[data-pc-section="buttonlabel"]');
         if (!this.label) {
             labelElement && this.htmlElement.removeChild(labelElement);
             return;
@@ -426,15 +500,15 @@ class ButtonDirective extends BaseComponent {
         labelElement ? (labelElement.textContent = this.label) : this.createLabel();
     }
     updateIcon() {
-        let iconElement = findSingle(this.htmlElement, '.p-button-icon');
-        let labelElement = findSingle(this.htmlElement, '.p-button-label');
+        let iconElement = findSingle(this.htmlElement, '[data-pc-section="buttonicon"]');
+        let labelElement = findSingle(this.htmlElement, '[data-pc-section="buttonlabel"]');
         if (this.loading && !this.loadingIcon && iconElement) {
             iconElement.innerHTML = this.spinnerIcon;
         }
         else if (iconElement?.innerHTML) {
             iconElement.innerHTML = '';
         }
-        if (iconElement) {
+        if (iconElement && !this.$unstyled()) {
             if (this.iconPos) {
                 iconElement.className = 'p-button-icon ' + (labelElement ? 'p-button-icon-' + this.iconPos : '') + ' ' + this.getIconClass();
             }
@@ -452,22 +526,22 @@ class ButtonDirective extends BaseComponent {
     onDestroy() {
         this.initialized = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.4", type: ButtonDirective, isStandalone: true, selector: "[pButton]", inputs: { ptButtonDirective: { classPropertyName: "ptButtonDirective", publicName: "ptButtonDirective", isSignal: true, isRequired: false, transformFunction: null }, hostName: { classPropertyName: "hostName", publicName: "hostName", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, plain: { classPropertyName: "plain", publicName: "plain", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, iconPos: { classPropertyName: "iconPos", publicName: "iconPos", isSignal: false, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: false, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, buttonProps: { classPropertyName: "buttonProps", publicName: "buttonProps", isSignal: false, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "class.p-button-icon-only": "isIconOnly()", "class.p-button-text": "isTextButton()" } }, providers: [ButtonStyle, { provide: BUTTON_DIRECTIVE_INSTANCE, useExisting: ButtonDirective }, { provide: PARENT_INSTANCE, useExisting: ButtonDirective }], queries: [{ propertyName: "iconSignal", first: true, predicate: ButtonIcon, descendants: true, isSignal: true }, { propertyName: "labelSignal", first: true, predicate: ButtonLabel, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.0.1", type: ButtonDirective, isStandalone: true, selector: "[pButton]", inputs: { ptButtonDirective: { classPropertyName: "ptButtonDirective", publicName: "ptButtonDirective", isSignal: true, isRequired: false, transformFunction: null }, pButtonPT: { classPropertyName: "pButtonPT", publicName: "pButtonPT", isSignal: true, isRequired: false, transformFunction: null }, pButtonUnstyled: { classPropertyName: "pButtonUnstyled", publicName: "pButtonUnstyled", isSignal: true, isRequired: false, transformFunction: null }, hostName: { classPropertyName: "hostName", publicName: "hostName", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, plain: { classPropertyName: "plain", publicName: "plain", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, iconPos: { classPropertyName: "iconPos", publicName: "iconPos", isSignal: false, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: false, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, buttonProps: { classPropertyName: "buttonProps", publicName: "buttonProps", isSignal: false, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "class.p-button-icon-only": "!$unstyled() && isIconOnly()", "class.p-button-text": " !$unstyled() && isTextButton()" } }, providers: [ButtonStyle, { provide: BUTTON_DIRECTIVE_INSTANCE, useExisting: ButtonDirective }, { provide: PARENT_INSTANCE, useExisting: ButtonDirective }], queries: [{ propertyName: "iconSignal", first: true, predicate: ButtonIcon, descendants: true, isSignal: true }, { propertyName: "labelSignal", first: true, predicate: ButtonLabel, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pButton]',
                     standalone: true,
                     providers: [ButtonStyle, { provide: BUTTON_DIRECTIVE_INSTANCE, useExisting: ButtonDirective }, { provide: PARENT_INSTANCE, useExisting: ButtonDirective }],
                     host: {
-                        '[class.p-button-icon-only]': 'isIconOnly()',
-                        '[class.p-button-text]': 'isTextButton()'
+                        '[class.p-button-icon-only]': '!$unstyled() && isIconOnly()',
+                        '[class.p-button-text]': ' !$unstyled() && isTextButton()'
                     },
                     hostDirectives: [Bind]
                 }]
-        }], ctorParameters: () => [], propDecorators: { hostName: [{
+        }], ctorParameters: () => [], propDecorators: { ptButtonDirective: [{ type: i0.Input, args: [{ isSignal: true, alias: "ptButtonDirective", required: false }] }], pButtonPT: [{ type: i0.Input, args: [{ isSignal: true, alias: "pButtonPT", required: false }] }], pButtonUnstyled: [{ type: i0.Input, args: [{ isSignal: true, alias: "pButtonUnstyled", required: false }] }], hostName: [{
                 type: Input
             }], text: [{
                 type: Input,
@@ -490,7 +564,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], loadingIcon: [{
                 type: Input
-            }], label: [{
+            }], fluid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluid", required: false }] }], iconSignal: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ButtonIcon), { isSignal: true }] }], labelSignal: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ButtonLabel), { isSignal: true }] }], label: [{
                 type: Input
             }], icon: [{
                 type: Input
@@ -645,7 +719,7 @@ class Button extends BaseComponent {
      * @defaultValue undefined
      * @group Props
      */
-    fluid = input(undefined, ...(ngDevMode ? [{ debugName: "fluid", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    fluid = input(undefined, { ...(ngDevMode ? { debugName: "fluid" } : {}), transform: booleanAttribute });
     /**
      * Callback to execute when button is clicked.
      * This event is intended to be used with the <p-button> component. Using a regular <button> element, use (click).
@@ -668,17 +742,17 @@ class Button extends BaseComponent {
      */
     onBlur = new EventEmitter();
     /**
-     * Template of the content.
+     * Custom content template.
      * @group Templates
      **/
     contentTemplate;
     /**
-     * Template of the loading.
+     * Custom loading icon template.
      * @group Templates
      **/
     loadingIconTemplate;
     /**
-     * Template of the icon.
+     * Custom icon template.
      * @group Templates
      **/
     iconTemplate;
@@ -687,6 +761,9 @@ class Button extends BaseComponent {
     get hasFluid() {
         return this.fluid() ?? !!this.pcFluid;
     }
+    get hasIcon() {
+        return this.icon || this.buttonProps?.icon || this.iconTemplate || this._iconTemplate || this.loadingIcon || this.loadingIconTemplate || this._loadingIconTemplate;
+    }
     _contentTemplate;
     _iconTemplate;
     _loadingIconTemplate;
@@ -708,24 +785,34 @@ class Button extends BaseComponent {
             }
         });
     }
-    spinnerIconClass() {
-        return Object.entries(this.iconClass())
-            .filter(([, value]) => !!value)
-            .reduce((acc, [key]) => acc + ` ${key}`, 'p-button-loading-icon');
+    get dataP() {
+        return this.cn({
+            [this.size]: this.size,
+            'icon-only': this.hasIcon && !this.label && !this.badge,
+            loading: this.loading,
+            fluid: this.hasFluid,
+            rounded: this.rounded,
+            raised: this.raised,
+            outlined: this.outlined || this.variant === 'outlined',
+            text: this.text || this.variant === 'text',
+            link: this.link,
+            vertical: (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label
+        });
+    }
+    get dataIconP() {
+        return this.cn({
+            [this.iconPos]: this.iconPos,
+            [this.size]: this.size
+        });
+    }
+    get dataLabelP() {
+        return this.cn({
+            [this.size]: this.size,
+            'icon-only': this.hasIcon && !this.label && !this.badge
+        });
     }
-    iconClass() {
-        return {
-            [`p-button-loading-icon pi-spin ${this.loadingIcon ?? ''}`]: this.loading,
-            'p-button-icon': true,
-            [this.icon]: true,
-            'p-button-icon-left': this.iconPos === 'left' && this.label,
-            'p-button-icon-right': this.iconPos === 'right' && this.label,
-            'p-button-icon-top': this.iconPos === 'top' && this.label,
-            'p-button-icon-bottom': this.iconPos === 'bottom' && this.label
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Button, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", type: Button, isStandalone: true, selector: "p-button", inputs: { hostName: { classPropertyName: "hostName", publicName: "hostName", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, plain: { classPropertyName: "plain", publicName: "plain", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, link: { classPropertyName: "link", publicName: "link", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: false, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, badgeClass: { classPropertyName: "badgeClass", publicName: "badgeClass", isSignal: false, isRequired: false, transformFunction: null }, badgeSeverity: { classPropertyName: "badgeSeverity", publicName: "badgeSeverity", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, iconPos: { classPropertyName: "iconPos", publicName: "iconPos", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: false, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: false, isRequired: false, transformFunction: null }, buttonProps: { classPropertyName: "buttonProps", publicName: "buttonProps", isSignal: false, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, providers: [ButtonStyle, { provide: BUTTON_INSTANCE, useExisting: Button }, { provide: PARENT_INSTANCE, useExisting: Button }], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }, { propertyName: "loadingIconTemplate", first: true, predicate: ["loadingicon"], descendants: true }, { propertyName: "iconTemplate", first: true, predicate: ["icon"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Button, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: Button, isStandalone: true, selector: "p-button", inputs: { hostName: { classPropertyName: "hostName", publicName: "hostName", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, plain: { classPropertyName: "plain", publicName: "plain", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, link: { classPropertyName: "link", publicName: "link", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: false, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, badgeClass: { classPropertyName: "badgeClass", publicName: "badgeClass", isSignal: false, isRequired: false, transformFunction: null }, badgeSeverity: { classPropertyName: "badgeSeverity", publicName: "badgeSeverity", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, iconPos: { classPropertyName: "iconPos", publicName: "iconPos", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: false, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: false, isRequired: false, transformFunction: null }, buttonProps: { classPropertyName: "buttonProps", publicName: "buttonProps", isSignal: false, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, providers: [ButtonStyle, { provide: BUTTON_INSTANCE, useExisting: Button }, { provide: PARENT_INSTANCE, useExisting: Button }], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }, { propertyName: "loadingIconTemplate", first: true, predicate: ["loadingicon"], descendants: true }, { propertyName: "iconTemplate", first: true, predicate: ["icon"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
         <button
             [attr.type]="type || buttonProps?.type"
             [attr.aria-label]="ariaLabel || buttonProps?.ariaLabel"
@@ -739,26 +826,42 @@ class Button extends BaseComponent {
             [attr.tabindex]="tabindex || buttonProps?.tabindex"
             [pAutoFocus]="autofocus || buttonProps?.autofocus"
             [pBind]="ptm('root')"
+            [attr.data-p]="dataP"
+            [attr.data-p-disabled]="disabled || loading || buttonProps?.disabled"
+            [attr.data-p-severity]="severity || buttonProps?.severity"
         >
             <ng-content></ng-content>
             <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
-            <ng-container *ngIf="loading">
+            <ng-container *ngIf="loading || buttonProps?.loading">
                 <ng-container *ngIf="!loadingIconTemplate && !_loadingIconTemplate">
-                    <span *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin', loadingIcon)" [pBind]="ptm('loadingIcon')" [attr.aria-hidden]="true"></span>
-                    <svg data-p-icon="spinner" *ngIf="!loadingIcon" [class]="cn(cx('loadingIcon'), spinnerIconClass())" [pBind]="ptm('loadingIcon')" [spin]="true" [attr.aria-hidden]="true" />
+                    <span *ngIf="loadingIcon || buttonProps?.loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin', loadingIcon || buttonProps?.loadingIcon)" [pBind]="ptm('loadingIcon')" [attr.aria-hidden]="true"></span>
+                    <svg data-p-icon="spinner" *ngIf="!(loadingIcon || buttonProps?.loadingIcon)" [class]="cn(cx('loadingIcon'), cx('spinnerIcon'))" [pBind]="ptm('loadingIcon')" [spin]="true" [attr.aria-hidden]="true" />
                 </ng-container>
                 <ng-template [ngIf]="loadingIconTemplate || _loadingIconTemplate" *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate; context: { class: cx('loadingIcon'), pt: ptm('loadingIcon') }"></ng-template>
             </ng-container>
-            <ng-container *ngIf="!loading">
-                <span *ngIf="icon && !iconTemplate && !_iconTemplate" [class]="cn('icon', iconClass())" [pBind]="ptm('icon')"></span>
+            <ng-container *ngIf="!(loading || buttonProps?.loading)">
+                <span *ngIf="(icon || buttonProps?.icon) && !iconTemplate && !_iconTemplate" [class]="cn(cx('icon'), icon || buttonProps?.icon)" [pBind]="ptm('icon')" [attr.data-p]="dataIconP"></span>
                 <ng-template [ngIf]="!icon && (iconTemplate || _iconTemplate)" *ngTemplateOutlet="iconTemplate || _iconTemplate; context: { class: cx('icon'), pt: ptm('icon') }"></ng-template>
             </ng-container>
-            <span [class]="cx('label')" [attr.aria-hidden]="icon && !label" *ngIf="!contentTemplate && !_contentTemplate && label" [pBind]="ptm('label')">{{ label }}</span>
-            <p-badge *ngIf="!contentTemplate && !_contentTemplate && badge" [value]="badge" [severity]="badgeSeverity" [pt]="ptm('pcBadge')"></p-badge>
+            <span
+                [class]="cx('label')"
+                [attr.aria-hidden]="(icon || buttonProps?.icon) && !(label || buttonProps?.label)"
+                *ngIf="!contentTemplate && !_contentTemplate && (label || buttonProps?.label)"
+                [pBind]="ptm('label')"
+                [attr.data-p]="dataLabelP"
+                >{{ label || buttonProps?.label }}</span
+            >
+            <p-badge
+                *ngIf="!contentTemplate && !_contentTemplate && (badge || buttonProps?.badge)"
+                [value]="badge || buttonProps?.badge"
+                [severity]="badgeSeverity || buttonProps?.badgeSeverity"
+                [pt]="ptm('pcBadge')"
+                [unstyled]="unstyled()"
+            ></p-badge>
         </button>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "component", type: SpinnerIcon, selector: "[data-p-icon=\"spinner\"]" }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i3.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Button, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Button, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-button',
@@ -778,22 +881,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             [attr.tabindex]="tabindex || buttonProps?.tabindex"
             [pAutoFocus]="autofocus || buttonProps?.autofocus"
             [pBind]="ptm('root')"
+            [attr.data-p]="dataP"
+            [attr.data-p-disabled]="disabled || loading || buttonProps?.disabled"
+            [attr.data-p-severity]="severity || buttonProps?.severity"
         >
             <ng-content></ng-content>
             <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
-            <ng-container *ngIf="loading">
+            <ng-container *ngIf="loading || buttonProps?.loading">
                 <ng-container *ngIf="!loadingIconTemplate && !_loadingIconTemplate">
-                    <span *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin', loadingIcon)" [pBind]="ptm('loadingIcon')" [attr.aria-hidden]="true"></span>
-                    <svg data-p-icon="spinner" *ngIf="!loadingIcon" [class]="cn(cx('loadingIcon'), spinnerIconClass())" [pBind]="ptm('loadingIcon')" [spin]="true" [attr.aria-hidden]="true" />
+                    <span *ngIf="loadingIcon || buttonProps?.loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin', loadingIcon || buttonProps?.loadingIcon)" [pBind]="ptm('loadingIcon')" [attr.aria-hidden]="true"></span>
+                    <svg data-p-icon="spinner" *ngIf="!(loadingIcon || buttonProps?.loadingIcon)" [class]="cn(cx('loadingIcon'), cx('spinnerIcon'))" [pBind]="ptm('loadingIcon')" [spin]="true" [attr.aria-hidden]="true" />
                 </ng-container>
                 <ng-template [ngIf]="loadingIconTemplate || _loadingIconTemplate" *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate; context: { class: cx('loadingIcon'), pt: ptm('loadingIcon') }"></ng-template>
             </ng-container>
-            <ng-container *ngIf="!loading">
-                <span *ngIf="icon && !iconTemplate && !_iconTemplate" [class]="cn('icon', iconClass())" [pBind]="ptm('icon')"></span>
+            <ng-container *ngIf="!(loading || buttonProps?.loading)">
+                <span *ngIf="(icon || buttonProps?.icon) && !iconTemplate && !_iconTemplate" [class]="cn(cx('icon'), icon || buttonProps?.icon)" [pBind]="ptm('icon')" [attr.data-p]="dataIconP"></span>
                 <ng-template [ngIf]="!icon && (iconTemplate || _iconTemplate)" *ngTemplateOutlet="iconTemplate || _iconTemplate; context: { class: cx('icon'), pt: ptm('icon') }"></ng-template>
             </ng-container>
-            <span [class]="cx('label')" [attr.aria-hidden]="icon && !label" *ngIf="!contentTemplate && !_contentTemplate && label" [pBind]="ptm('label')">{{ label }}</span>
-            <p-badge *ngIf="!contentTemplate && !_contentTemplate && badge" [value]="badge" [severity]="badgeSeverity" [pt]="ptm('pcBadge')"></p-badge>
+            <span
+                [class]="cx('label')"
+                [attr.aria-hidden]="(icon || buttonProps?.icon) && !(label || buttonProps?.label)"
+                *ngIf="!contentTemplate && !_contentTemplate && (label || buttonProps?.label)"
+                [pBind]="ptm('label')"
+                [attr.data-p]="dataLabelP"
+                >{{ label || buttonProps?.label }}</span
+            >
+            <p-badge
+                *ngIf="!contentTemplate && !_contentTemplate && (badge || buttonProps?.badge)"
+                [value]="badge || buttonProps?.badge"
+                [severity]="badgeSeverity || buttonProps?.badgeSeverity"
+                [pt]="ptm('pcBadge')"
+                [unstyled]="unstyled()"
+            ></p-badge>
         </button>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -863,7 +982,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], buttonProps: [{
                 type: Input
-            }], onClick: [{
+            }], fluid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluid", required: false }] }], onClick: [{
                 type: Output
             }], onFocus: [{
                 type: Output
@@ -883,11 +1002,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: [PrimeTemplate]
             }] } });
 class ButtonModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: ButtonModule, imports: [CommonModule, ButtonDirective, Button, SharedModule, ButtonLabel, ButtonIcon], exports: [ButtonDirective, Button, ButtonLabel, ButtonIcon, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonModule, imports: [CommonModule, Button, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: ButtonModule, imports: [CommonModule, ButtonDirective, Button, SharedModule, ButtonLabel, ButtonIcon], exports: [ButtonDirective, Button, ButtonLabel, ButtonIcon, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonModule, imports: [CommonModule, Button, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ButtonDirective, Button, SharedModule, ButtonLabel, ButtonIcon],