Button | Renders empty label when the label is not defined

[paulyipkh]

I'm submitting a ... (check one with "x")

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
When no label is assigned to pButton, text   is rendered.

Expected behavior
When no label is assigned to pButton, the text should be empty, not space nor  

Minimal reproduction of the problem with instructions
https://stackblitz.com/edit/github-7rxhpm?file=src/app/app.component.html

https://github.com/primefaces/primeng/blob/master/src/app/components/button/button.ts
e.g. line 45 labelElement.appendChild(document.createTextNode(this.label||' '));
the expression this.label||' ' should be replaced with this.label === undefined || this.label === null ? '': this.label

[jonnomk]

I totally agree with this.

[paulyipkh]

In PrimeNg 9, I could center-align the content projected into a button? Does anybody know how this can be achieved in PrimeNg10 ?

<div class="ui-g ui-fluid" >
  <div class="ui-g-12">
    <button pButton>
      <div>Content</div>
      <i class="fa fa-home"></i>
    </button>
  </div>
</div>

[rsilva1959]

workaround -> define label= "Edit", but include classes p-button-icon-only no-label where
::ng-deep .no-label>.p-button-label {
display: none;
}
<button *ngIf="config.actions.edit" label="Edit" pButton pRipple icon="pi pi-pencil" class="p-button-rounded p-button-success p-button-icon-only no-label p-mr-2" (click)="editItem(item)">
ugly, but works!

[jonnomk]

Yeah, you can solve most things by applying custom styles, but you shouldn't really have to. The problem with a bunch of these components is that people have been using work-arounds to solve other issues too, and as a result the issues have been hanging around for years.

[SternBreeze]

any updates?

[h1ghland3r]

Any news?

[macorifice]

I have a similar issue, when I declare

<p-button
  icon="pi pi-refresh"
  (onClick)="refreshData()"
  pButton="Refresh data"
  label="Refresh data"
>

This is shown

So I decided to use the workaround written by @rsilva1959

<p-button
  class="no-label no-icon"
  icon="pi pi-refresh"
  style="margin-left: 30px; border-radius: 15px"
  (onClick)="refreshData()"
  pButton="Refresh data"
  label="Refresh data"
>

With this style

::ng-deep .no-label>.p-button-label {
  display: none;
}

::ng-deep .no-icon>.p-button-icon {
  display: none;
}

And the result is

[MaKCbIMKo]

I'm sorry, but I don't think it solved.

You closed this issue, but it still inserts &nbsp if you have no label.

I don't understand why it can't just render nothing if there is no label/icon?

[AlexanderVega]

Any news about this bug?

[sirwesley]

https://stackblitz.com/edit/github-bd8xy8?file=src%2Fapp%2Fapp.component.html <--- example showing the bug.
&nbsp is added in the 'label' <span> when no label is defined.

<button pButton (click)="onClick()"></button>

renders

<button pbutton class="p-element p-button p-component">
<span class="p-button-label">&nbsp;</span>
</button>

expected render

<button pbutton class="p-element p-button p-component">
<span class="p-button-label"></span>
</button>

[AlexanderVega]

https://stackblitz.com/edit/github-bd8xy8?file=src%2Fapp%2Fapp.component.html <--- example showing the bug.

&nbsp is added in the 'label' <span> when no label is defined.

<button pButton (click)="onClick()"></button>

renders

<button pbutton class="p-element p-button p-component">

<span class="p-button-label">&nbsp;</span>

</button>

expected render

<button pbutton class="p-element p-button p-component">

<span class="p-button-label"></span>

</button>

What I did to solve this bug is get the class of element span inside the button tag and "display: none". Use this to a specific element, cause' maybe later you will need this element in another button

[drekthral]

Still not resolved. (╯‵□′)╯︵┻━┻

[DanilVezmenov]

Still not resolved!!! I HATE THIS BUG
NEED USE

 ::ng-deep .p-button-label {
        display: none !important;
      }

For hardcode resolve

[DanilVezmenov]

  span when label is empty

[Alhajras]

The bug still exists!