Search code examples
angularprimeng

PrimeNg <p-button></p-button> tag problem

PrimeNg p-button tag not working and shows just white button with blue borders but pButton directive works fine.

 <button pButton icon="pi pi-pencil"></button> <---- works fine     
 <p-button icon="pi pi-trash"></p-button> <---- not working

in google inspector:

<button _ngcontent-ng-c3648527949="" pbutton="" icon="pi pi-pencil" class="p-element p-button p-component p-button-icon-only" ng-reflect-icon="pi pi-pencil"><span class="p-button-icon pi pi-pencil" aria-hidden="true"></span></button>

<p-button _ngcontent-ng-c3648527949="" icon="pi pi-trash" class="p-element" ng-reflect-icon="pi pi-trash"><button pripple="" class="p-ripple p-element p-button p-component p-button-icon-only" ng-reflect-ng-class="[object Object]" type="button"><!--bindings={}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--><span ng-reflect-ng-class="[object Object]" class="pi pi-trash p-button-icon ng-star-inserted"></span><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--ng-container--><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={}--><!--bindings={}--></button></p-button>
Solution

  • I must be a bug from primeNg. I fixed it by adding stycleClass on primary button:

    <p-button styleClass="p-button-primary"></p-button>

    and adding this line on style.css:

    .p-element .p-button-primary {
  background-color: #3b82f6;
}
.p-element .p-button-primary:hover {
  background-color: #2563eb;
}