Open Joebeurg opened 3 months ago
As correctly mentioned the .p-button-icon-only
class interferes with the badge attribute of the p-button component.
You can circumvent this issue by using a different setup of your p-button implementation
<p-button severity="secondary">
<i class="pi pi-align-justify"></i>
<p-badge value="150" />
</p-button>
Hope this helps
Describe the bug
When using the Button component while only specifying an icon and a badge, it does not render well, this is cause by a class that gets appended to the button
.p-button-icon-only
which has a fixed widthwidth: 2.5rem;
.When a label is provided the badge inside the button is rendered correctly.
This is the button with the issue:
This is the button with label:
Environment
OS: Windows 11
Reproducer
No response
Angular version
18.0.1
PrimeNG version
17.18.0
Build / Runtime
Angular CLI App
Language
TypeScript
Node version (for AoT issues node --version)
20.14.0
Browser(s)
Microsoft Edge; Version 125.0.2535.92 (Official build) (64-bit)
Steps to reproduce the behavior
No response
Expected behavior
No response