Search code examples
angularbuttonsizeprimeng

Ngprime fix the size of buttons

I am building some primeng buttons but they are too big for my project. I have seen in the documentation that I can use

<p-button label="Small" icon="pi pi-check" styleClass="p-button-sm"></p-button>

But as I am using other properties of those buttons, I am using

<button>

instead of

<p-button>

I have tried using styles (width and height) but the text inside the button does not change its size. Is there a way to achieve this? I attach the code of my buttons:

<span class="p-buttonset">
        <button pButton pRipple label="Mapa" class="p-button-outlined p-button-secondary"
            style="background-color: rgba(255, 255, 255, .65); color:darkslategray ;" (click)="cambiarTipo(0)" ></button>
        <button pButton pRipple label="Satélite" class="p-button-outlined p-button-secondary"
            style="background-color: rgba(255, 255, 255, .65); color: darkslategray;" (click)="cambiarTipo(1)"></button>

    </span>
    &nbsp;

    <button pButton pRipple label="Zonas prohibidas" class="p-button-outlined p-button-secondary"
        style="background-color: rgba(255, 255, 255, .65); color:darkslategray ;" (click)="prohibidas()"></button>
    &nbsp;<button pButton pRipple label="Ver puntos" class="p-button-outlined p-button-secondary"
        style="background-color: rgba(255, 255, 255, .65); color:darkslategray ;" (click)="mostrarTabla()">
    </button>
    &nbsp;

    <div class="p-inputgroup" >
    <p-inputNumber inputStyleClass="black" [(ngModel)]="tiempoIsocronas" mode="decimal" placeholder="Tiempo isocronas"
        [useGrouping]="false" [disabled]="lista.length!=1" [inputStyle]="{border:'1px solid darkslategray',background:'rgba(255, 255, 255, .65)'}">
    </p-inputNumber> <button pButton pRipple type="button" icon="pi pi-search"
        class="p-button-outlined p-button-secondary" (click)="llamarServicio(listaMetodos.isocronas)"
        [disabled]="lista.length!=1" style="background-color: rgba(255, 255, 255, .65); color:darkslategray ;">
    </button> </div>
Solution
    • Use this css

    :host ::ng-deep .p-button{
  font-size:30px;  //your font size here
}