primeng 19.1.2 → 20.0.0-beta.1

package/fesm2022/primeng-button.mjs

@@ -1,712 +1,63 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, inject, Directive, contentChild, computed, booleanAttribute, Input, EventEmitter, numberAttribute, ContentChildren, ContentChild, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Injectable, inject, Directive, contentChild, computed, input, booleanAttribute, Input, EventEmitter, numberAttribute, ContentChildren, ContentChild, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { addClass, isEmpty, findSingle } from '@primeuix/utils';
 import { SharedModule, PrimeTemplate } from 'primeng/api';
 import { AutoFocus } from 'primeng/autofocus';
 import * as i2 from 'primeng/badge';
 import { BadgeModule } from 'primeng/badge';
 import { BaseComponent } from 'primeng/basecomponent';
+import { Fluid } from 'primeng/fluid';
 import { SpinnerIcon } from 'primeng/icons';
 import { Ripple } from 'primeng/ripple';
+import { style } from '@primeuix/styles/button';
 import { BaseStyle } from 'primeng/base';
 
-const theme = ({ dt }) => `
-.p-button {
-    display: inline-flex;
-    cursor: pointer;
-    user-select: none;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    position: relative;
-    color: ${dt('button.primary.color')};
-    background: ${dt('button.primary.background')};
-    border: 1px solid ${dt('button.primary.border.color')};
-    padding-block: ${dt('button.padding.y')};
-    padding-inline: ${dt('button.padding.x')};
-    font-size: 1rem;
-    font-family: inherit;
-    font-feature-settings: inherit;
-    transition: background ${dt('button.transition.duration')}, color ${dt('button.transition.duration')}, border-color ${dt('button.transition.duration')},
-            outline-color ${dt('button.transition.duration')}, box-shadow ${dt('button.transition.duration')};
-    border-radius: ${dt('button.border.radius')};
-    outline-color: transparent;
-    gap: ${dt('button.gap')};
-}
-
-.p-button-icon,
-.p-button-icon:before,
-.p-button-icon:after {
-    line-height: inherit;
-}
-
-.p-button:disabled {
-    cursor: default;
-}
-
-.p-button-icon-right {
-    order: 1;
-}
-
-.p-button-icon-right:dir(rtl) {
-    order: -1;
-}
-
-.p-button:not(.p-button-vertical) .p-button-icon:not(.p-button-icon-right):dir(rtl) {
-    order: 1;
-}
-
-.p-button-icon-bottom {
-    order: 2;
-}
-
-.p-button-icon-only {
-    width: ${dt('button.icon.only.width')};
-    padding-inline-start: 0;
-    padding-inline-end: 0;
-    gap: 0;
-}
-
-.p-button-icon-only.p-button-rounded {
-    border-radius: 50%;
-    height: ${dt('button.icon.only.width')};
-}
-
-.p-button-icon-only .p-button-label {
-    visibility: hidden;
-    width: 0;
-}
-
-.p-button-sm {
-    font-size: ${dt('button.sm.font.size')};
-    padding-block: ${dt('button.sm.padding.y')};
-    padding-inline: ${dt('button.sm.padding.x')};
-}
-
-.p-button-sm .p-button-icon {
-    font-size: ${dt('button.sm.font.size')};
-}
-
-.p-button-sm.p-button-icon-only {
-    width: ${dt('button.sm.icon.only.width')};
-}
-
-.p-button-sm.p-button-icon-only.p-button-rounded {
-    height: ${dt('button.sm.icon.only.width')};
-}
-
-.p-button-lg {
-    font-size: ${dt('button.lg.font.size')};
-    padding-block: ${dt('button.lg.padding.y')};
-    padding-inline: ${dt('button.lg.padding.x')};
-}
-
-.p-button-lg .p-button-icon {
-    font-size: ${dt('button.lg.font.size')};
-}
-
-.p-button-lg.p-button-icon-only {
-    width: ${dt('button.lg.icon.only.width')};
-}
-
-.p-button-lg.p-button-icon-only.p-button-rounded {
-    height: ${dt('button.lg.icon.only.width')};
-}
-
-.p-button-vertical {
-    flex-direction: column;
-}
-
-.p-button-label {
-    font-weight: ${dt('button.label.font.weight')};
-}
-
-.p-button-fluid {
-    width: 100%;
-}
-
-.p-button-fluid.p-button-icon-only {
-    width: ${dt('button.icon.only.width')};
-}
-
-.p-button:not(:disabled):hover {
-    background: ${dt('button.primary.hover.background')};
-    border: 1px solid ${dt('button.primary.hover.border.color')};
-    color: ${dt('button.primary.hover.color')};
-}
-
-.p-button:not(:disabled):active {
-    background: ${dt('button.primary.active.background')};
-    border: 1px solid ${dt('button.primary.active.border.color')};
-    color: ${dt('button.primary.active.color')};
-}
-
-.p-button:focus-visible {
-    box-shadow: ${dt('button.primary.focus.ring.shadow')};
-    outline: ${dt('button.focus.ring.width')} ${dt('button.focus.ring.style')} ${dt('button.primary.focus.ring.color')};
-    outline-offset: ${dt('button.focus.ring.offset')};
-}
-
-.p-button .p-badge {
-    min-width: ${dt('button.badge.size')};
-    height: ${dt('button.badge.size')};
-    line-height: ${dt('button.badge.size')};
-}
-
-.p-button-raised {
-    box-shadow: ${dt('button.raised.shadow')};
-}
-
-.p-button-rounded {
-    border-radius: ${dt('button.rounded.border.radius')};
-}
-
-.p-button-secondary {
-    background: ${dt('button.secondary.background')};
-    border: 1px solid ${dt('button.secondary.border.color')};
-    color: ${dt('button.secondary.color')};
-}
-
-.p-button-secondary:not(:disabled):hover {
-    background: ${dt('button.secondary.hover.background')};
-    border: 1px solid ${dt('button.secondary.hover.border.color')};
-    color: ${dt('button.secondary.hover.color')};
-}
-
-.p-button-secondary:not(:disabled):active {
-    background: ${dt('button.secondary.active.background')};
-    border: 1px solid ${dt('button.secondary.active.border.color')};
-    color: ${dt('button.secondary.active.color')};
-}
-
-.p-button-secondary:focus-visible {
-    outline-color: ${dt('button.secondary.focus.ring.color')};
-    box-shadow: ${dt('button.secondary.focus.ring.shadow')};
-}
-
-.p-button-success {
-    background: ${dt('button.success.background')};
-    border: 1px solid ${dt('button.success.border.color')};
-    color: ${dt('button.success.color')};
-}
-
-.p-button-success:not(:disabled):hover {
-    background: ${dt('button.success.hover.background')};
-    border: 1px solid ${dt('button.success.hover.border.color')};
-    color: ${dt('button.success.hover.color')};
-}
-
-.p-button-success:not(:disabled):active {
-    background: ${dt('button.success.active.background')};
-    border: 1px solid ${dt('button.success.active.border.color')};
-    color: ${dt('button.success.active.color')};
-}
-
-.p-button-success:focus-visible {
-    outline-color: ${dt('button.success.focus.ring.color')};
-    box-shadow: ${dt('button.success.focus.ring.shadow')};
-}
-
-.p-button-info {
-    background: ${dt('button.info.background')};
-    border: 1px solid ${dt('button.info.border.color')};
-    color: ${dt('button.info.color')};
-}
-
-.p-button-info:not(:disabled):hover {
-    background: ${dt('button.info.hover.background')};
-    border: 1px solid ${dt('button.info.hover.border.color')};
-    color: ${dt('button.info.hover.color')};
-}
-
-.p-button-info:not(:disabled):active {
-    background: ${dt('button.info.active.background')};
-    border: 1px solid ${dt('button.info.active.border.color')};
-    color: ${dt('button.info.active.color')};
-}
-
-.p-button-info:focus-visible {
-    outline-color: ${dt('button.info.focus.ring.color')};
-    box-shadow: ${dt('button.info.focus.ring.shadow')};
-}
-
-.p-button-warn {
-    background: ${dt('button.warn.background')};
-    border: 1px solid ${dt('button.warn.border.color')};
-    color: ${dt('button.warn.color')};
-}
-
-.p-button-warn:not(:disabled):hover {
-    background: ${dt('button.warn.hover.background')};
-    border: 1px solid ${dt('button.warn.hover.border.color')};
-    color: ${dt('button.warn.hover.color')};
-}
-
-.p-button-warn:not(:disabled):active {
-    background: ${dt('button.warn.active.background')};
-    border: 1px solid ${dt('button.warn.active.border.color')};
-    color: ${dt('button.warn.active.color')};
-}
-
-.p-button-warn:focus-visible {
-    outline-color: ${dt('button.warn.focus.ring.color')};
-    box-shadow: ${dt('button.warn.focus.ring.shadow')};
-}
-
-.p-button-help {
-    background: ${dt('button.help.background')};
-    border: 1px solid ${dt('button.help.border.color')};
-    color: ${dt('button.help.color')};
-}
-
-.p-button-help:not(:disabled):hover {
-    background: ${dt('button.help.hover.background')};
-    border: 1px solid ${dt('button.help.hover.border.color')};
-    color: ${dt('button.help.hover.color')};
-}
-
-.p-button-help:not(:disabled):active {
-    background: ${dt('button.help.active.background')};
-    border: 1px solid ${dt('button.help.active.border.color')};
-    color: ${dt('button.help.active.color')};
-}
-
-.p-button-help:focus-visible {
-    outline-color: ${dt('button.help.focus.ring.color')};
-    box-shadow: ${dt('button.help.focus.ring.shadow')};
-}
-
-.p-button-danger {
-    background: ${dt('button.danger.background')};
-    border: 1px solid ${dt('button.danger.border.color')};
-    color: ${dt('button.danger.color')};
-}
-
-.p-button-danger:not(:disabled):hover {
-    background: ${dt('button.danger.hover.background')};
-    border: 1px solid ${dt('button.danger.hover.border.color')};
-    color: ${dt('button.danger.hover.color')};
-}
-
-.p-button-danger:not(:disabled):active {
-    background: ${dt('button.danger.active.background')};
-    border: 1px solid ${dt('button.danger.active.border.color')};
-    color: ${dt('button.danger.active.color')};
-}
-
-.p-button-danger:focus-visible {
-    outline-color: ${dt('button.danger.focus.ring.color')};
-    box-shadow: ${dt('button.danger.focus.ring.shadow')};
-}
-
-.p-button-contrast {
-    background: ${dt('button.contrast.background')};
-    border: 1px solid ${dt('button.contrast.border.color')};
-    color: ${dt('button.contrast.color')};
-}
-
-.p-button-contrast:not(:disabled):hover {
-    background: ${dt('button.contrast.hover.background')};
-    border: 1px solid ${dt('button.contrast.hover.border.color')};
-    color: ${dt('button.contrast.hover.color')};
-}
-
-.p-button-contrast:not(:disabled):active {
-    background: ${dt('button.contrast.active.background')};
-    border: 1px solid ${dt('button.contrast.active.border.color')};
-    color: ${dt('button.contrast.active.color')};
-}
-
-.p-button-contrast:focus-visible {
-    outline-color: ${dt('button.contrast.focus.ring.color')};
-    box-shadow: ${dt('button.contrast.focus.ring.shadow')};
-}
-
-.p-button-outlined {
-    background: transparent;
-    border-color: ${dt('button.outlined.primary.border.color')};
-    color: ${dt('button.outlined.primary.color')};
-}
-
-.p-button-outlined:not(:disabled):hover {
-    background: ${dt('button.outlined.primary.hover.background')};
-    border-color: ${dt('button.outlined.primary.border.color')};
-    color: ${dt('button.outlined.primary.color')};
-}
-
-.p-button-outlined:not(:disabled):active {
-    background: ${dt('button.outlined.primary.active.background')};
-    border-color: ${dt('button.outlined.primary.border.color')};
-    color: ${dt('button.outlined.primary.color')};
-}
-
-.p-button-outlined.p-button-secondary {
-    border-color: ${dt('button.outlined.secondary.border.color')};
-    color: ${dt('button.outlined.secondary.color')};
-}
-
-.p-button-outlined.p-button-secondary:not(:disabled):hover {
-    background: ${dt('button.outlined.secondary.hover.background')};
-    border-color: ${dt('button.outlined.secondary.border.color')};
-    color: ${dt('button.outlined.secondary.color')};
-}
-
-.p-button-outlined.p-button-secondary:not(:disabled):active {
-    background: ${dt('button.outlined.secondary.active.background')};
-    border-color: ${dt('button.outlined.secondary.border.color')};
-    color: ${dt('button.outlined.secondary.color')};
-}
-
-.p-button-outlined.p-button-success {
-    border-color: ${dt('button.outlined.success.border.color')};
-    color: ${dt('button.outlined.success.color')};
-}
-
-.p-button-outlined.p-button-success:not(:disabled):hover {
-    background: ${dt('button.outlined.success.hover.background')};
-    border-color: ${dt('button.outlined.success.border.color')};
-    color: ${dt('button.outlined.success.color')};
-}
-
-.p-button-outlined.p-button-success:not(:disabled):active {
-    background: ${dt('button.outlined.success.active.background')};
-    border-color: ${dt('button.outlined.success.border.color')};
-    color: ${dt('button.outlined.success.color')};
-}
-
-.p-button-outlined.p-button-info {
-    border-color: ${dt('button.outlined.info.border.color')};
-    color: ${dt('button.outlined.info.color')};
-}
-
-.p-button-outlined.p-button-info:not(:disabled):hover {
-    background: ${dt('button.outlined.info.hover.background')};
-    border-color: ${dt('button.outlined.info.border.color')};
-    color: ${dt('button.outlined.info.color')};
-}
-
-.p-button-outlined.p-button-info:not(:disabled):active {
-    background: ${dt('button.outlined.info.active.background')};
-    border-color: ${dt('button.outlined.info.border.color')};
-    color: ${dt('button.outlined.info.color')};
-}
-
-.p-button-outlined.p-button-warn {
-    border-color: ${dt('button.outlined.warn.border.color')};
-    color: ${dt('button.outlined.warn.color')};
-}
-
-.p-button-outlined.p-button-warn:not(:disabled):hover {
-    background: ${dt('button.outlined.warn.hover.background')};
-    border-color: ${dt('button.outlined.warn.border.color')};
-    color: ${dt('button.outlined.warn.color')};
-}
-
-.p-button-outlined.p-button-warn:not(:disabled):active {
-    background: ${dt('button.outlined.warn.active.background')};
-    border-color: ${dt('button.outlined.warn.border.color')};
-    color: ${dt('button.outlined.warn.color')};
-}
-
-.p-button-outlined.p-button-help {
-    border-color: ${dt('button.outlined.help.border.color')};
-    color: ${dt('button.outlined.help.color')};
-}
-
-.p-button-outlined.p-button-help:not(:disabled):hover {
-    background: ${dt('button.outlined.help.hover.background')};
-    border-color: ${dt('button.outlined.help.border.color')};
-    color: ${dt('button.outlined.help.color')};
-}
-
-.p-button-outlined.p-button-help:not(:disabled):active {
-    background: ${dt('button.outlined.help.active.background')};
-    border-color: ${dt('button.outlined.help.border.color')};
-    color: ${dt('button.outlined.help.color')};
-}
-
-.p-button-outlined.p-button-danger {
-    border-color: ${dt('button.outlined.danger.border.color')};
-    color: ${dt('button.outlined.danger.color')};
-}
-
-.p-button-outlined.p-button-danger:not(:disabled):hover {
-    background: ${dt('button.outlined.danger.hover.background')};
-    border-color: ${dt('button.outlined.danger.border.color')};
-    color: ${dt('button.outlined.danger.color')};
-}
-
-.p-button-outlined.p-button-danger:not(:disabled):active {
-    background: ${dt('button.outlined.danger.active.background')};
-    border-color: ${dt('button.outlined.danger.border.color')};
-    color: ${dt('button.outlined.danger.color')};
-}
-
-.p-button-outlined.p-button-contrast {
-    border-color: ${dt('button.outlined.contrast.border.color')};
-    color: ${dt('button.outlined.contrast.color')};
-}
-
-.p-button-outlined.p-button-contrast:not(:disabled):hover {
-    background: ${dt('button.outlined.contrast.hover.background')};
-    border-color: ${dt('button.outlined.contrast.border.color')};
-    color: ${dt('button.outlined.contrast.color')};
-}
-
-.p-button-outlined.p-button-contrast:not(:disabled):active {
-    background: ${dt('button.outlined.contrast.active.background')};
-    border-color: ${dt('button.outlined.contrast.border.color')};
-    color: ${dt('button.outlined.contrast.color')};
-}
-
-.p-button-outlined.p-button-plain {
-    border-color: ${dt('button.outlined.plain.border.color')};
-    color: ${dt('button.outlined.plain.color')};
-}
-
-.p-button-outlined.p-button-plain:not(:disabled):hover {
-    background: ${dt('button.outlined.plain.hover.background')};
-    border-color: ${dt('button.outlined.plain.border.color')};
-    color: ${dt('button.outlined.plain.color')};
-}
-
-.p-button-outlined.p-button-plain:not(:disabled):active {
-    background: ${dt('button.outlined.plain.active.background')};
-    border-color: ${dt('button.outlined.plain.border.color')};
-    color: ${dt('button.outlined.plain.color')};
-}
-
-.p-button-text {
-    background: transparent;
-    border-color: transparent;
-    color: ${dt('button.text.primary.color')};
-}
-
-.p-button-text:not(:disabled):hover {
-    background: ${dt('button.text.primary.hover.background')};
-    border-color: transparent;
-    color: ${dt('button.text.primary.color')};
-}
-
-.p-button-text:not(:disabled):active {
-    background: ${dt('button.text.primary.active.background')};
-    border-color: transparent;
-    color: ${dt('button.text.primary.color')};
-}
-
-.p-button-text.p-button-secondary {
-    background: transparent;
-    border-color: transparent;
-    color: ${dt('button.text.secondary.color')};
-}
-
-.p-button-text.p-button-secondary:not(:disabled):hover {
-    background: ${dt('button.text.secondary.hover.background')};
-    border-color: transparent;
-    color: ${dt('button.text.secondary.color')};
-}
-
-.p-button-text.p-button-secondary:not(:disabled):active {
-    background: ${dt('button.text.secondary.active.background')};
-    border-color: transparent;
-    color: ${dt('button.text.secondary.color')};
-}
-
-.p-button-text.p-button-success {
-    background: transparent;
-    border-color: transparent;
-    color: ${dt('button.text.success.color')};
-}
-
-.p-button-text.p-button-success:not(:disabled):hover {
-    background: ${dt('button.text.success.hover.background')};
-    border-color: transparent;
-    color: ${dt('button.text.success.color')};
-}
-
-.p-button-text.p-button-success:not(:disabled):active {
-    background: ${dt('button.text.success.active.background')};
-    border-color: transparent;
-    color: ${dt('button.text.success.color')};
-}
-
-.p-button-text.p-button-info {
-    background: transparent;
-    border-color: transparent;
-    color: ${dt('button.text.info.color')};
-}
-
-.p-button-text.p-button-info:not(:disabled):hover {
-    background: ${dt('button.text.info.hover.background')};
-    border-color: transparent;
-    color: ${dt('button.text.info.color')};
-}
-
-.p-button-text.p-button-info:not(:disabled):active {
-    background: ${dt('button.text.info.active.background')};
-    border-color: transparent;
-    color: ${dt('button.text.info.color')};
-}
-
-.p-button-text.p-button-warn {
-    background: transparent;
-    border-color: transparent;
-    color: ${dt('button.text.warn.color')};
-}
-
-.p-button-text.p-button-warn:not(:disabled):hover {
-    background: ${dt('button.text.warn.hover.background')};
-    border-color: transparent;
-    color: ${dt('button.text.warn.color')};
-}
-
-.p-button-text.p-button-warn:not(:disabled):active {
-    background: ${dt('button.text.warn.active.background')};
-    border-color: transparent;
-    color: ${dt('button.text.warn.color')};
-}
-
-.p-button-text.p-button-help {
-    background: transparent;
-    border-color: transparent;
-    color: ${dt('button.text.help.color')};
-}
-
-.p-button-text.p-button-help:not(:disabled):hover {
-    background: ${dt('button.text.help.hover.background')};
-    border-color: transparent;
-    color: ${dt('button.text.help.color')};
-}
-
-.p-button-text.p-button-help:not(:disabled):active {
-    background: ${dt('button.text.help.active.background')};
-    border-color: transparent;
-    color: ${dt('button.text.help.color')};
-}
-
-.p-button-text.p-button-danger {
-    background: transparent;
-    border-color: transparent;
-    color: ${dt('button.text.danger.color')};
-}
-
-.p-button-text.p-button-danger:not(:disabled):hover {
-    background: ${dt('button.text.danger.hover.background')};
-    border-color: transparent;
-    color: ${dt('button.text.danger.color')};
-}
-
-.p-button-text.p-button-danger:not(:disabled):active {
-    background: ${dt('button.text.danger.active.background')};
-    border-color: transparent;
-    color: ${dt('button.text.danger.color')};
-}
-
-.p-button-text.p-button-plain {
-    background: transparent;
-    border-color: transparent;
-    color: ${dt('button.text.plain.color')};
-}
-
-.p-button-text.p-button-plain:not(:disabled):hover {
-    background: ${dt('button.text.plain.hover.background')};
-    border-color: transparent;
-    color: ${dt('button.text.plain.color')};
-}
-
-.p-button-text.p-button-plain:not(:disabled):active {
-    background: ${dt('button.text.plain.active.background')};
-    border-color: transparent;
-    color: ${dt('button.text.plain.color')};
-}
-
-.p-button-text.p-button-contrast {
-    background: transparent;
-    border-color: transparent;
-    color: ${dt('button.text.contrast.color')};
-}
-
-.p-button-text.p-button-contrast:not(:disabled):hover {
-    background: ${dt('button.text.contrast.hover.background')};
-    border-color: transparent;
-    color: ${dt('button.text.contrast.color')};
-}
-
-.p-button-text.p-button-contrast:not(:disabled):active {
-    background: ${dt('button.text.contrast.active.background')};
-    border-color: transparent;
-    color: ${dt('button.text.contrast.color')};
-}
-
-.p-button-link {
-    background: transparent;
-    border-color: transparent;
-    color: ${dt('button.link.color')};
-}
-
-.p-button-link:not(:disabled):hover {
-    background: transparent;
-    border-color: transparent;
-    color: ${dt('button.link.hover.color')};
-}
-
-.p-button-link:not(:disabled):hover .p-button-label {
-    text-decoration: underline;
-}
-
-.p-button-link:not(:disabled):active {
-    background: transparent;
-    border-color: transparent;
-    color: ${dt('button.link.active.color')};
-}
-
-/* For PrimeNG */
-.p-button-icon-right {
-    order: 1;
-}
-
-p-button[iconpos='right'] spinnericon {
-    order: 1;
-}
-`;
 const classes = {
-    root: ({ instance, props }) => [
+    root: ({ instance }) => [
         'p-button p-component',
         {
-            'p-button-icon-only': instance.hasIcon && !props.label && !props.badge,
-            'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
-            'p-button-loading': props.loading,
-            'p-button-link': props.link,
-            [`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-sm': props.size === 'small',
-            'p-button-lg': props.size === 'large',
-            'p-button-plain': props.plain,
-            'p-button-fluid': props.fluid
+            'p-button-icon-only': (instance.icon || instance.iconTemplate || instance._iconTemplate || instance.loadingIcon || instance.loadingIconTemplate || instance._loadingIconTemplate) && !instance.label,
+            'p-button-vertical': (instance.iconPos === 'top' || instance.iconPos === 'bottom') && instance.label,
+            'p-button-loading': instance.loading,
+            'p-button-link': instance.link,
+            [`p-button-${instance.severity}`]: instance.severity,
+            'p-button-raised': instance.raised,
+            'p-button-rounded': instance.rounded,
+            'p-button-text': instance.text || instance.variant === 'text',
+            'p-button-outlined': instance.outlined || instance.variant === 'outlined',
+            'p-button-sm': instance.size === 'small',
+            'p-button-lg': instance.size === 'large',
+            'p-button-plain': instance.plain,
+            'p-button-fluid': instance.hasFluid
         }
     ],
     loadingIcon: 'p-button-loading-icon',
-    icon: ({ props }) => [
+    icon: ({ instance }) => [
         'p-button-icon',
         {
-            [`p-button-icon-${props.iconPos}`]: props.label
-        }
+            [`p-button-icon-${instance.iconPos}`]: instance.label,
+            'p-button-icon-left': instance.iconPos === 'left' && instance.label,
+            'p-button-icon-right': instance.iconPos === 'right' && instance.label
+        },
+        instance.icon
     ],
+    spinnerIcon: ({ instance }) => {
+        return Object.entries(instance.iconClass())
+            .filter(([, value]) => !!value)
+            .reduce((acc, [key]) => acc + ` ${key}`, 'p-button-loading-icon');
+    },
     label: 'p-button-label'
 };
 class ButtonStyle extends BaseStyle {
     name = 'button';
-    theme = theme;
+    theme = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ButtonStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ButtonStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ButtonStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ButtonStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ButtonStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ButtonStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -748,10 +99,10 @@ const INTERNAL_BUTTON_CLASSES = {
 };
 class ButtonLabel extends BaseComponent {
     _componentStyle = inject(ButtonStyle);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ButtonLabel, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: ButtonLabel, isStandalone: true, selector: "[pButtonLabel]", host: { properties: { "class.p-button-label": "true" } }, providers: [ButtonStyle], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ButtonLabel, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: ButtonLabel, isStandalone: true, selector: "[pButtonLabel]", host: { properties: { "class.p-button-label": "true" } }, providers: [ButtonStyle], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ButtonLabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ButtonLabel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pButtonLabel]',
@@ -764,10 +115,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
         }] });
 class ButtonIcon extends BaseComponent {
     _componentStyle = inject(ButtonStyle);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ButtonIcon, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: ButtonIcon, isStandalone: true, selector: "[pButtonIcon]", host: { properties: { "class.p-button-icon": "true" } }, providers: [ButtonStyle], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ButtonIcon, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: ButtonIcon, isStandalone: true, selector: "[pButtonIcon]", host: { properties: { "class.p-button-icon": "true" } }, providers: [ButtonStyle], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ButtonIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ButtonIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pButtonIcon]',
@@ -876,15 +227,15 @@ class ButtonDirective extends BaseComponent {
     size = null;
     /**
      * Add a plain textual class to the button without a background initially.
-     * @deprecated use variant property instead.
      * @group Props
      */
     plain = false;
     /**
      * Spans 100% width of the container when enabled.
+     * @defaultValue undefined
      * @group Props
      */
-    fluid;
+    fluid = input(undefined, { transform: booleanAttribute });
     _label;
     _icon;
     _loading = false;
@@ -893,6 +244,7 @@ class ButtonDirective extends BaseComponent {
         return this.el.nativeElement;
     }
     _internalClasses = Object.values(INTERNAL_BUTTON_CLASSES);
+    pcFluid = inject(Fluid, { optional: true, host: true, skipSelf: true });
     isTextButton = computed(() => !!(!this.iconSignal() && this.labelSignal() && this.text));
     /**
      * Text of the button.
@@ -996,9 +348,7 @@ class ButtonDirective extends BaseComponent {
         return styleClass;
     }
     get hasFluid() {
-        const nativeElement = this.el.nativeElement;
-        const fluidComponent = nativeElement.closest('p-fluid');
-        return isEmpty(this.fluid) ? !!fluidComponent : this.fluid;
+        return this.fluid() ?? !!this.pcFluid;
     }
     setStyleClass() {
         const styleClass = this.getStyleClass();
@@ -1081,10 +431,10 @@ class ButtonDirective extends BaseComponent {
         this.initialized = false;
         super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ButtonDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.8", type: ButtonDirective, isStandalone: true, selector: "[pButton]", inputs: { iconPos: "iconPos", loadingIcon: "loadingIcon", loading: "loading", severity: "severity", raised: ["raised", "raised", booleanAttribute], rounded: ["rounded", "rounded", booleanAttribute], text: ["text", "text", booleanAttribute], outlined: ["outlined", "outlined", booleanAttribute], size: "size", plain: ["plain", "plain", booleanAttribute], fluid: ["fluid", "fluid", booleanAttribute], label: "label", icon: "icon", buttonProps: "buttonProps" }, host: { properties: { "class.p-button-icon-only": "isIconOnly()", "class.p-button-text": "isTextButton()" } }, providers: [ButtonStyle], queries: [{ propertyName: "iconSignal", first: true, predicate: ButtonIcon, descendants: true, isSignal: true }, { propertyName: "labelSignal", first: true, predicate: ButtonLabel, descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ButtonDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.0.6", type: ButtonDirective, isStandalone: true, selector: "[pButton]", inputs: { iconPos: { classPropertyName: "iconPos", publicName: "iconPos", isSignal: false, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: false, isRequired: false, transformFunction: null }, 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 }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, plain: { classPropertyName: "plain", publicName: "plain", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, 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 }, buttonProps: { classPropertyName: "buttonProps", publicName: "buttonProps", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "class.p-button-icon-only": "isIconOnly()", "class.p-button-text": "isTextButton()" } }, providers: [ButtonStyle], queries: [{ propertyName: "iconSignal", first: true, predicate: ButtonIcon, descendants: true, isSignal: true }, { propertyName: "labelSignal", first: true, predicate: ButtonLabel, descendants: true, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pButton]',
@@ -1120,9 +470,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             }], plain: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], fluid: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], label: [{
                 type: Input
             }], icon: [{
@@ -1192,7 +539,6 @@ class Button extends BaseComponent {
     text = false;
     /**
      * Add a plain textual class to the button without a background initially.
-     * @deprecated use variant property instead.
      * @group Props
      */
     plain = false;
@@ -1260,9 +606,10 @@ class Button extends BaseComponent {
     autofocus;
     /**
      * Spans 100% width of the container when enabled.
+     * @defaultValue undefined
      * @group Props
      */
-    fluid;
+    fluid = input(undefined, { 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).
@@ -1314,10 +661,9 @@ class Button extends BaseComponent {
             Object.entries(val).forEach(([k, v]) => this[`_${k}`] !== v && (this[`_${k}`] = v));
         }
     }
+    pcFluid = inject(Fluid, { optional: true, host: true, skipSelf: true });
     get hasFluid() {
-        const nativeElement = this.el.nativeElement;
-        const fluidComponent = nativeElement.closest('p-fluid');
-        return isEmpty(this.fluid) ? !!fluidComponent : this.fluid;
+        return this.fluid() ?? !!this.pcFluid;
     }
     _componentStyle = inject(ButtonStyle);
     templates;
@@ -1367,34 +713,14 @@ class Button extends BaseComponent {
             'p-button-icon-bottom': this.iconPos === 'bottom' && this.label
         };
     }
-    get buttonClass() {
-        return {
-            'p-button p-component': true,
-            'p-button-icon-only': (this.icon || this.iconTemplate || this._iconTemplate || this.loadingIcon || this.loadingIconTemplate || this._loadingIconTemplate) && !this.label,
-            'p-button-vertical': (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label,
-            'p-button-loading': this.loading,
-            '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 || this.variant == 'text',
-            'p-button-outlined': this.outlined || this.variant == 'outlined',
-            'p-button-sm': this.size === 'small',
-            'p-button-lg': this.size === 'large',
-            'p-button-plain': this.plain,
-            'p-button-fluid': this.hasFluid,
-            [`${this.styleClass}`]: this.styleClass
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: Button, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.8", type: Button, isStandalone: true, selector: "p-button", inputs: { type: "type", iconPos: "iconPos", icon: "icon", badge: "badge", label: "label", disabled: ["disabled", "disabled", booleanAttribute], loading: ["loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", raised: ["raised", "raised", booleanAttribute], rounded: ["rounded", "rounded", booleanAttribute], text: ["text", "text", booleanAttribute], plain: ["plain", "plain", booleanAttribute], severity: "severity", outlined: ["outlined", "outlined", booleanAttribute], link: ["link", "link", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], size: "size", variant: "variant", style: "style", styleClass: "styleClass", badgeClass: "badgeClass", badgeSeverity: "badgeSeverity", ariaLabel: "ariaLabel", autofocus: ["autofocus", "autofocus", booleanAttribute], fluid: ["fluid", "fluid", booleanAttribute], buttonProps: "buttonProps" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, providers: [ButtonStyle], 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, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Button, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: Button, isStandalone: true, selector: "p-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, iconPos: { classPropertyName: "iconPos", publicName: "iconPos", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: false, isRequired: false, transformFunction: null }, 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 }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: false, isRequired: false, transformFunction: null }, 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 }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, buttonProps: { classPropertyName: "buttonProps", publicName: "buttonProps", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, providers: [ButtonStyle], 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, usesOnChanges: true, ngImport: i0, template: `
         <button
             [attr.type]="type"
             [attr.aria-label]="ariaLabel"
             [ngStyle]="style"
             [disabled]="disabled || loading"
-            [ngClass]="buttonClass"
+            [class]="cn(cx('root'), styleClass)"
             (click)="onClick.emit($event)"
             (focus)="onFocus.emit($event)"
             (blur)="onBlur.emit($event)"
@@ -1408,21 +734,21 @@ class Button extends BaseComponent {
             <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
             <ng-container *ngIf="loading">
                 <ng-container *ngIf="!loadingIconTemplate && !_loadingIconTemplate">
-                    <span *ngIf="loadingIcon" [ngClass]="iconClass()" [attr.aria-hidden]="true" [attr.data-pc-section]="'loadingicon'"></span>
-                    <SpinnerIcon *ngIf="!loadingIcon" [styleClass]="spinnerIconClass()" [spin]="true" [attr.aria-hidden]="true" [attr.data-pc-section]="'loadingicon'" />
+                    <span *ngIf="loadingIcon" [class]="cx('loadingIcon')" [attr.aria-hidden]="true" [attr.data-pc-section]="'loadingicon'"></span>
+                    <SpinnerIcon *ngIf="!loadingIcon" [styleClass]="cn(cx('loadingIcon'), spinnerIconClass())" [spin]="true" [attr.aria-hidden]="true" [attr.data-pc-section]="'loadingicon'" />
                 </ng-container>
-                <ng-template [ngIf]="loadingIconTemplate || _loadingIconTemplate" *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate; context: { class: iconClass() }"></ng-template>
+                <ng-template [ngIf]="loadingIconTemplate || _loadingIconTemplate" *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate; context: { class: cx('loadingIcon') }"></ng-template>
             </ng-container>
             <ng-container *ngIf="!loading">
-                <span *ngIf="icon && !iconTemplate && !_iconTemplate" [class]="icon" [ngClass]="iconClass()" [attr.data-pc-section]="'icon'"></span>
-                <ng-template [ngIf]="!icon && (iconTemplate || _iconTemplate)" *ngTemplateOutlet="iconTemplate || _iconTemplate; context: { class: iconClass() }"></ng-template>
+                <span *ngIf="icon && !iconTemplate && !_iconTemplate" [class]="cx('icon')" [attr.data-pc-section]="'icon'"></span>
+                <ng-template [ngIf]="!icon && (iconTemplate || _iconTemplate)" *ngTemplateOutlet="iconTemplate || _iconTemplate; context: { class: cx('icon') }"></ng-template>
             </ng-container>
-            <span class="p-button-label" [attr.aria-hidden]="icon && !label" *ngIf="!contentTemplate && !_contentTemplate && label" [attr.data-pc-section]="'label'">{{ label }}</span>
+            <span [class]="cx('label')" [attr.aria-hidden]="icon && !label" *ngIf="!contentTemplate && !_contentTemplate && label" [attr.data-pc-section]="'label'">{{ label }}</span>
             <p-badge *ngIf="!contentTemplate && !_contentTemplate && badge" [value]="badge" [severity]="badgeSeverity"></p-badge>
         </button>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["autofocus", "pAutoFocus"] }, { kind: "component", type: SpinnerIcon, selector: "SpinnerIcon" }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i2.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "component", type: SpinnerIcon, selector: "SpinnerIcon" }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i2.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: Button, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Button, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-button',
@@ -1434,7 +760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             [attr.aria-label]="ariaLabel"
             [ngStyle]="style"
             [disabled]="disabled || loading"
-            [ngClass]="buttonClass"
+            [class]="cn(cx('root'), styleClass)"
             (click)="onClick.emit($event)"
             (focus)="onFocus.emit($event)"
             (blur)="onBlur.emit($event)"
@@ -1448,16 +774,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate"></ng-container>
             <ng-container *ngIf="loading">
                 <ng-container *ngIf="!loadingIconTemplate && !_loadingIconTemplate">
-                    <span *ngIf="loadingIcon" [ngClass]="iconClass()" [attr.aria-hidden]="true" [attr.data-pc-section]="'loadingicon'"></span>
-                    <SpinnerIcon *ngIf="!loadingIcon" [styleClass]="spinnerIconClass()" [spin]="true" [attr.aria-hidden]="true" [attr.data-pc-section]="'loadingicon'" />
+                    <span *ngIf="loadingIcon" [class]="cx('loadingIcon')" [attr.aria-hidden]="true" [attr.data-pc-section]="'loadingicon'"></span>
+                    <SpinnerIcon *ngIf="!loadingIcon" [styleClass]="cn(cx('loadingIcon'), spinnerIconClass())" [spin]="true" [attr.aria-hidden]="true" [attr.data-pc-section]="'loadingicon'" />
                 </ng-container>
-                <ng-template [ngIf]="loadingIconTemplate || _loadingIconTemplate" *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate; context: { class: iconClass() }"></ng-template>
+                <ng-template [ngIf]="loadingIconTemplate || _loadingIconTemplate" *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate; context: { class: cx('loadingIcon') }"></ng-template>
             </ng-container>
             <ng-container *ngIf="!loading">
-                <span *ngIf="icon && !iconTemplate && !_iconTemplate" [class]="icon" [ngClass]="iconClass()" [attr.data-pc-section]="'icon'"></span>
-                <ng-template [ngIf]="!icon && (iconTemplate || _iconTemplate)" *ngTemplateOutlet="iconTemplate || _iconTemplate; context: { class: iconClass() }"></ng-template>
+                <span *ngIf="icon && !iconTemplate && !_iconTemplate" [class]="cx('icon')" [attr.data-pc-section]="'icon'"></span>
+                <ng-template [ngIf]="!icon && (iconTemplate || _iconTemplate)" *ngTemplateOutlet="iconTemplate || _iconTemplate; context: { class: cx('icon') }"></ng-template>
             </ng-container>
-            <span class="p-button-label" [attr.aria-hidden]="icon && !label" *ngIf="!contentTemplate && !_contentTemplate && label" [attr.data-pc-section]="'label'">{{ label }}</span>
+            <span [class]="cx('label')" [attr.aria-hidden]="icon && !label" *ngIf="!contentTemplate && !_contentTemplate && label" [attr.data-pc-section]="'label'">{{ label }}</span>
             <p-badge *ngIf="!contentTemplate && !_contentTemplate && badge" [value]="badge" [severity]="badgeSeverity"></p-badge>
         </button>
     `,
@@ -1523,9 +849,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             }], autofocus: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], fluid: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], onClick: [{
                 type: Output
             }], onFocus: [{
@@ -1548,11 +871,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 args: [PrimeTemplate]
             }] } });
 class ButtonModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", 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: "19.2.8", ngImport: i0, type: ButtonModule, imports: [CommonModule, Button, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", 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.0.6", ngImport: i0, type: ButtonModule, imports: [CommonModule, Button, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ButtonDirective, Button, SharedModule, ButtonLabel, ButtonIcon],