Button

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

Import #


import { ButtonModule } from 'primeng/button';

Basic #

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


<p-button label="Submit" />

Directive #

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>

Link #

A button can be rendered as a link as well.

External Router


<p-button label="Link" [link]="true" />
<a href="https://angular.dev/" target="_blank" rel="noopener noreferrer" class="p-button font-bold">
    External
</a>
<a routerLink="/" class="p-button font-bold">
    Router
</a>

Icons #

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


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

Loading #

Busy state is controlled with the loading property.


<p-button 
    label="Search" 
    icon="pi pi-check" 
    [loading]="loading" 
    (onClick)="load()" />

Severity #

Severity defines the type of button.


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

Disabled #

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


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

Raised #

Raised buttons display a shadow to indicate elevation.


<p-button label="Primary" [raised]="true" />
<p-button label="Secondary" [raised]="true" severity="secondary" />
<p-button label="Success" [raised]="true" severity="success" />
<p-button label="Info" [raised]="true" severity="info" />
<p-button label="Warning" [raised]="true" severity="warning" />
<p-button label="Help" [raised]="true" severity="help" />
<p-button label="Danger" [raised]="true" severity="danger" />
<p-button label="Contrast" [raised]="true" severity="contrast" />

Rounded #

Rounded buttons have a circular border radius.


<p-button label="Primary" [rounded]="true" />
<p-button label="Secondary" [rounded]="true" severity="secondary" />
<p-button label="Success" [rounded]="true" severity="success" />
<p-button label="Info" [rounded]="true" severity="info" />
<p-button label="Warning" [rounded]="true" severity="warning" />
<p-button label="Help" [rounded]="true" severity="help" />
<p-button label="Danger" [rounded]="true" severity="danger" />
<p-button label="Contrast" [rounded]="true" severity="contrast" />

Text #

Text buttons are displayed as textual elements.


<p-button label="Primary" [text]="true" />
<p-button label="Secondary" [text]="true" severity="secondary" />
<p-button label="Success" [text]="true" severity="success" />
<p-button label="Info" [text]="true" severity="info" />
<p-button label="Warning" [text]="true" severity="warning" />
<p-button label="Help" [text]="true" severity="help" />
<p-button label="Danger" [text]="true" severity="danger" />
<p-button label="Plain" [text]="true" [plain]="true" />

Raised Text #

Text buttons can be displayed as raised for elevation.


<p-button label="Primary" [text]="true" [raised]="true" />
<p-button label="Secondary" [text]="true" [raised]="true" severity="secondary" />
<p-button label="Success" [text]="true" [raised]="true" severity="success" />
<p-button label="Info" [text]="true" [raised]="true" severity="info" />
<p-button label="Warning" [text]="true" [raised]="true" severity="warning" />
<p-button label="Help" [text]="true" [raised]="true" severity="help" />
<p-button label="Danger" [text]="true" [raised]="true" severity="danger" />
<p-button label="Plain" [text]="true" [raised]="true" [plain]="true" />

Outlined #

Outlined buttons display a border without a background initially.


<p-button label="Primary" [outlined]="true" />
<p-button label="Secondary" [outlined]="true" severity="secondary" />
<p-button label="Success" [outlined]="true" severity="success" />
<p-button label="Info" [outlined]="true" severity="info" />
<p-button label="Warning" [outlined]="true" severity="warning" />
<p-button label="Help" [outlined]="true" severity="help" />
<p-button label="Danger" [outlined]="true" severity="danger" />
<p-button label="Contrast" [outlined]="true" severity="contrast" />

Icon Only #

Buttons can have icons without labels.


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

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

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

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

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

Badges #

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


<p-button label="Emails" badge="8" />
<p-button 
    label="Messages" 
    icon="pi pi-users" 
    badge="2" 
    badgeClass="p-badge-contrast" 
    outlined="true" />

Button Group #

Multiple buttons are grouped when wrapped inside an element with ButtonGroup component.


<p-buttonGroup>
    <p-button label="Save" icon="pi pi-check" />
    <p-button label="Delete" icon="pi pi-trash" />
    <p-button label="Cancel" icon="pi pi-times" />
</p-buttonGroup>

Sizes #

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


<p-button label="Small" icon="pi pi-check" size="small" />
<p-button label="Normal" icon="pi pi-check" />
<p-button label="Large" icon="pi pi-check" size="large" />

Template #

Custom content inside a button is defined as children.


<p-button [outlined]="true">
        <svg width="35" height="40" viewBox="0 0 33 35" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
        <path d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z" fill="var(--primary-color)" />
        <mask id="mask0_1_36" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="33">
            <path d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z" fill="var(--primary-color-text)" />
        </mask>
        <g mask="url(#mask0_1_36)">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M15.1935 0V3.5994V3.58318V20.0075V20.0075V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1935 0Z" fill="var(--primary-color)" />
        </g>
        <path d="M19.6399 15.3776L18.1861 15.0547L19.3169 16.6695V21.6755L23.1938 18.4458V12.9554L21.4169 13.6013L19.6399 15.3776Z" fill="var(--primary-color-text)" />
        <path d="M10.5936 15.3776L12.0474 15.0547L10.9166 16.6695V21.6755L7.03966 18.4458V12.9554L8.81661 13.6013L10.5936 15.3776Z" fill="var(--primary-color-text)" />
        <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M11.3853 16.9726L12.6739 15.0309L13.4793 15.5163H16.7008L17.5061 15.0309L18.7947 16.9726V24.254L17.8283 25.7103L16.7008 26.843H13.4793L12.3518 25.7103L11.3853 24.254V16.9726Z"
            fill="var(--primary-color-text)"
        />
        <path d="M19.3168 24.7437L21.4168 22.6444V20.5451L19.3168 22.3214V24.7437Z" fill="var(--primary-color-text)" />
        <path d="M10.9166 24.7437L8.81662 22.6444V20.5451L10.9166 22.3214V24.7437Z" fill="var(--primary-color-text)" />
        <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M13.0167 5.68861L11.7244 8.7568L13.8244 14.8932H14.7936V5.68861H13.0167ZM15.4397 5.68861V14.8932H16.5706L18.5091 8.7568L17.2167 5.68861H15.4397Z"
            fill="var(--primary-color-text)"
        />
        <path d="M13.8244 14.8932L6.87813 12.3094L5.90888 8.27235L11.8859 8.7568L13.9859 14.8932H13.8244Z" fill="var(--primary-color-text)" />
        <path d="M16.5706 14.8932L23.5169 12.3094L24.4861 8.27235L18.3476 8.7568L16.4091 14.8932H16.5706Z" fill="var(--primary-color-text)" />
        <path d="M18.8321 8.27235L22.2245 7.94938L19.9629 5.68861H17.7013L18.8321 8.27235Z" fill="var(--primary-color-text)" />
        <path d="M11.4013 8.27235L8.00893 7.94938L10.2705 5.68861H12.5321L11.4013 8.27235Z" fill="var(--primary-color-text)" />
    </svg>
</p-button>

Style #

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

Name	Element
p-button	Button element
p-button-icon	Icon element
p-button-label	Label element of the button

Accessibility #

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 icon="pi pi-check" label="Submit" />

<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

Key	Function
tab	Moves focus to the button.
enter	Activates the button.
space	Activates the button.

Button API

API defines helper props, events and others for the PrimeNG Button module.

Button #

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

Properties #

Defines the input properties of the component.

name	type	default	description
type	string	button	Type of the button.
iconPos	ButtonIconPosition	left	Position of the icon.
icon	string	null	Name of the icon.
badge	string	null	Value of the badge.
label	string	null	Uses to pass attributes to the label's DOM element.
disabled	boolean	false	When present, it specifies that the component should be disabled.
loading	boolean	false	Whether the button is in loading state.
loadingIcon	string	null	Icon to display in loading state.
raised	boolean	false	Add a shadow to indicate elevation.
rounded	boolean	false	Add a circular border radius to the button.
text	boolean	false	Add a textual class to the button without a background initially.
plain	boolean	false	Add a plain textual class to the button without a background initially.
severity	"success" \| "info" \| "warning" \| "primary" \| "help" \| "danger" \| "secondary" \| "contrast"	null	Defines the style of the button.
outlined	boolean	false	Add a border class without a background initially.
link	boolean	false	Add a link style to the button.
tabindex	number	null	Add a tabindex to the button.
size	"small" \| "large"	null	Defines the size of the button.
style	Object	null	Inline style of the element.
styleClass	string	null	Class of the element.
badgeClass	string	null	Style class of the badge.
ariaLabel	string	null	Used to define a string that autocomplete attribute the current element.
autofocus	boolean	false	When present, it specifies that the component should automatically get focus on load.

Emitters #

Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.

name	parameters	description
onClick	event : MouseEvent	Callback to execute when button is clicked. This event is intended to be used with the <p-button> component. Using a regular <button> element, use (click).
onFocus	event : FocusEvent	Callback to execute when button is focused. This event is intended to be used with the <p-button> component. Using a regular <button> element, use (focus).
onBlur	event : FocusEvent	Callback to execute when button loses focus. This event is intended to be used with the <p-button> component. Using a regular <button> element, use (blur).

Templates #

Defines the templates used by the component.

name	parameters	description
content		Custom template of content.
icon	context : { class: NgClass, // Icon class. }	Custom template of icon.
loadingicon	context : { class: NgClass, // Icon class. }	Custom template of loadingicon.

ButtonDirective #

Button directive is an extension to button component.

Properties #

Defines the input properties of the component.

name	type	default	description
iconPos	ButtonIconPosition	left	Position of the icon.
loadingIcon	string	null	Uses to pass attributes to the loading icon's DOM element.
label	string	null	Text of the button.
icon	string	null	Name of the icon.
loading	boolean	null	Whether the button is in loading state.
severity	"success" \| "info" \| "warning" \| "primary" \| "help" \| "danger" \| "secondary" \| "contrast"	null	Defines the style of the button.
raised	boolean	false	Add a shadow to indicate elevation.
rounded	boolean	false	Add a circular border radius to the button.
text	boolean	false	Add a textual class to the button without a background initially.
outlined	boolean	false	Add a border class without a background initially.
size	"small" \| "large"	null	Defines the size of the button.
plain	boolean	false	Add a plain textual class to the button without a background initially.