Button

Button is an extension to standard button element with icons and theming.


import { ButtonModule } from 'primeng/button';

Text to display on a button is defined with the label property.



<p-button label="Submit"></p-button>

Button can also be used as directive using pButton. In contrary of p-button component, pButton directive does not utilize ripple effect, use pRipple directive to enable ripple.



<button pButton pRipple label="Submit" class="p-button-success"></button>

A button can be rendered as a link as well.



<p-button label="Submit" styleClass="p-button-link"></p-button>

Icon of a button is specified with icon property and position is configured using iconPos attribute.



<p-button icon="pi pi-check"></p-button>
<p-button label="Submit" icon="pi pi-check"></p-button>
<p-button label="Submit" icon="pi pi-check" iconPos="right"></p-button>

Busy state is controlled with the loading property.



<p-button label="Submit" [loading]="loading" (click)="load()"></p-button>

Severity defines the type of button.



<p-button label="Primary"></p-button>
<p-button label="Secondary" styleClass="p-button-secondary"></p-button>
<p-button label="Success" styleClass="p-button-success"></p-button>
<p-button label="Info" styleClass="p-button-info"></p-button>
<p-button label="Warning" styleClass="p-button-warning"></p-button>
<p-button label="Help" styleClass="p-button-help"></p-button>
<p-button label="Danger" styleClass="p-button-danger"></p-button>

When disabled is present, the element cannot be edited and focused.



<p-button label="Submit" [disabled]="true"></p-button>

Raised buttons display a shadow to indicate elevation.



<p-button label="Primary" styleClass="p-button-raised"></p-button>
<p-button label="Secondary" styleClass="p-button-raised p-button-secondary"></p-button>
<p-button label="Success" styleClass="p-button-raised p-button-success"></p-button>
<p-button label="Info" styleClass="p-button-raised p-button-info"></p-button>
<p-button label="Warning" styleClass="p-button-raised p-button-warning"></p-button>
<p-button label="Help" styleClass="p-button-raised p-button-help"></p-button>
<p-button label="Danger" styleClass="p-button-raised p-button-danger"></p-button>

Rounded buttons have a circular border radius.



<p-button label="Primary" styleClass="p-button-rounded"></p-button>
<p-button label="Secondary" styleClass="p-button-rounded p-button-secondary"></p-button>
<p-button label="Success" styleClass="p-button-rounded p-button-success"></p-button>
<p-button label="Info" styleClass="p-button-rounded p-button-info"></p-button>
<p-button label="Warning" styleClass="p-button-rounded p-button-warning"></p-button>
<p-button label="Help" styleClass="p-button-rounded p-button-help"></p-button>
<p-button label="Danger" styleClass="p-button-rounded p-button-danger"></p-button>

Text buttons are displayed as textual elements.



<p-button label="Primary" styleClass="p-button-text"></p-button>
<p-button label="Secondary" styleClass="p-button-secondary p-button-text"></p-button>
<p-button label="Success" styleClass="p-button-success p-button-text"></p-button>
<p-button label="Info" styleClass="p-button-info p-button-text"></p-button>
<p-button label="Warning" styleClass="p-button-warning p-button-text"></p-button>
<p-button label="Help" styleClass="p-button-help p-button-text"></p-button>
<p-button label="Danger" styleClass="p-button-danger p-button-text"></p-button>

Text buttons can be displayed as raised for elevation.



<p-button label="Primary" styleClass="p-button-raised p-button-text"></p-button>
<p-button label="Secondary" styleClass="p-button-raised p-button-text p-button-secondary"></p-button>
<p-button label="Success" styleClass="p-button-raised p-button-text p-button-success"></p-button>
<p-button label="Info" styleClass="p-button-raised p-button-text p-button-info"></p-button>
<p-button label="Warning" styleClass="p-button-raised p-button-text p-button-warning"></p-button>
<p-button label="Help" styleClass="p-button-raised p-button-text p-button-help"></p-button>
<p-button label="Danger" styleClass="p-button-raised p-button-text p-button-danger"></p-button>

Outlined buttons display a border without a background initially.



<p-button label="Primary" styleClass="p-button-outlined"></p-button>
<p-button label="Secondary" styleClass="p-button-outlined p-button-secondary"></p-button>
<p-button label="Success" styleClass="p-button-outlined p-button-success"></p-button>
<p-button label="Info" styleClass="p-button-outlined p-button-info"></p-button>
<p-button label="Warning" styleClass="p-button-outlined p-button-warning"></p-button>
<p-button label="Help" styleClass="p-button-outlined p-button-help"></p-button>
<p-button label="Danger" styleClass="p-button-outlined p-button-danger"></p-button>

Buttons can have icons without labels.



<p-button icon="pi pi-check"></p-button>
<p-button icon="pi pi-bookmark" styleClass="p-button-secondary"></p-button>
<p-button icon="pi pi-search" styleClass="p-button-success"></p-button>
<p-button icon="pi pi-user" styleClass="p-button-info"></p-button>
<p-button icon="pi pi-bell" styleClass="p-button-warning"></p-button>
<p-button icon="pi pi-heart" styleClass="p-button-help"></p-button>
<p-button icon="pi pi-times" styleClass="p-button-danger"></p-button>

<p-button icon="pi pi-check" styleClass="p-button-rounded"></p-button>
<p-button icon="pi pi-bookmark" styleClass="p-button-rounded p-button-secondary"></p-button>
<p-button icon="pi pi-search" styleClass="p-button-rounded p-button-success"></p-button>
<p-button icon="pi pi-user" styleClass="p-button-rounded p-button-info"></p-button>
<p-button icon="pi pi-bell" styleClass="p-button-rounded p-button-warning"></p-button>
<p-button icon="pi pi-heart" styleClass="p-button-rounded p-button-help"></p-button>
<p-button icon="pi pi-times" styleClass="p-button-rounded p-button-danger"></p-button>

<p-button icon="pi pi-check" styleClass="p-button-rounded p-button-outlined"></p-button>
<p-button icon="pi pi-bookmark" styleClass="p-button-rounded p-button-secondary p-button-outlined"></p-button>
<p-button icon="pi pi-search" styleClass="p-button-rounded p-button-success p-button-outlined"></p-button>
<p-button icon="pi pi-user" styleClass="p-button-rounded p-button-info p-button-outlined"></p-button>
<p-button icon="pi pi-bell" styleClass="p-button-rounded p-button-warning p-button-outlined"></p-button>
<p-button icon="pi pi-heart" styleClass="p-button-rounded p-button-help p-button-outlined"></p-button>
<p-button icon="pi pi-times" styleClass="p-button-rounded p-button-danger p-button-outlined"></p-button>

<p-button icon="pi pi-check" styleClass="p-button-rounded p-button-text p-button-raised"></p-button>
<p-button icon="pi pi-bookmark" styleClass="p-button-rounded p-button-secondary p-button-text p-button-raised"></p-button>
<p-button icon="pi pi-search" styleClass="p-button-rounded p-button-success p-button-text p-button-raised"></p-button>
<p-button icon="pi pi-user" styleClass="p-button-rounded p-button-info p-button-text p-button-raised"></p-button>
<p-button icon="pi pi-bell" styleClass="p-button-rounded p-button-warning p-button-text p-button-raised"></p-button>
<p-button icon="pi pi-heart" styleClass="p-button-rounded p-button-help p-button-text p-button-raised"></p-button>
<p-button icon="pi pi-times" styleClass="p-button-rounded p-button-danger p-button-text p-button-raised"></p-button>

<p-button icon="pi pi-check" styleClass="p-button-rounded p-button-text"></p-button>
<p-button icon="pi pi-bookmark" styleClass="p-button-rounded p-button-secondary p-button-text"></p-button>
<p-button icon="pi pi-search" styleClass="p-button-rounded p-button-success p-button-text"></p-button>
<p-button icon="pi pi-user" styleClass="p-button-rounded p-button-info p-button-text"></p-button>
<p-button icon="pi pi-bell" styleClass="p-button-rounded p-button-warning p-button-text"></p-button>
<p-button icon="pi pi-heart" styleClass="p-button-rounded p-button-help p-button-text"></p-button>
<p-button icon="pi pi-times" styleClass="p-button-rounded p-button-danger p-button-text"></p-button>

Buttons have built-in badge support with badge and badgeClass properties.



<p-button label="Emails" badge="8"></p-button>
<p-button label="Messages" icon="pi pi-users" styleClass="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button>

Multiple buttons are grouped when wrapped inside an element with p-buttonset class.



<span class="p-buttonset">
    <button pButton pRipple label="Save" icon="pi pi-check"></button>
    <button pButton pRipple label="Delete" icon="pi pi-trash"></button>
    <button pButton pRipple label="Cancel" icon="pi pi-times"></button>
</span>

Button provides small and large sizes as alternatives to the standard.



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

Custom content inside a button is defined as children.



<p-button styleClass="p-button-outlined">
    <img alt="logo" src="https://primefaces.org/cdn/primeng/images/primeng-icon.svg" style="width: 1.5rem" />
    <span class="ml-2 font-bold">PrimeNG</span>
</p-button>

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
p-buttonButton element
p-button-iconIcon element
p-button-labelLabel element of the button
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

Screen Reader

Button component renders a native button element that implicitly includes any passed prop. Text to describe the button is defined with the aria-label prop, if not present label prop is used as the value. If the button is icon only or custom templating is used, it is recommended to use aria-label so that screen readers would be able to read the element properly.


<p-button icon="pi pi-check" aria-label="Submit"></p-button>
<p-button icon="pi pi-check" label="Submit"></p-button>

<p-button class="youtube p-0" aria-label="Youtube">
    <i class="pi pi-youtube px-2"></i>
    <span class="px-3">Youtube</span>
</p-button>

Keyboard Support

KeyFunction
tabMoves focus to the button.
enterActivates the button.
spaceActivates the button.