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 along with pButtonLabel and pButtonIcon helper directives. In contrary of p-button component, pButton directive does not utilize ripple effect, use pRipple directive to enable ripple.


<button pButton pRipple severity="success">
    <WindowMaximizeIcon pButtonIcon />
    <span pButtonLabel>label</span>
</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-home" aria-label="Save" />
<p-button label="Profile" icon="pi pi-user" />
<p-button label="Save" icon="pi pi-check" iconPos="right" />
<p-button label="Search" icon="pi pi-search" iconPos="top" />
<p-button label="Update" icon="pi pi-refresh" iconPos="bottom" />

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="Warn" severity="warn" />
<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="Warn" [raised]="true" severity="warn" />
<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="Warn" [rounded]="true" severity="warn" />
<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" variant="text" />
<p-button label="Secondary" variant="text" severity="secondary" />
<p-button label="Success" variant="text" severity="success" />
<p-button label="Info" variant="text" severity="info" />
<p-button label="Warn" variant="text" severity="warn" />
<p-button label="Help" variant="text" severity="help" />
<p-button label="Danger" variant="text" severity="danger" />
<p-button label="Plain" variant="text" />

Raised Text #

Text buttons can be displayed as raised for elevation.


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

Outlined #

Outlined buttons display a border without a background initially.


<p-button label="Primary" variant="outlined" />
<p-button label="Secondary" variant="outlined" severity="secondary" />
<p-button label="Success" variant="outlined" severity="success" />
<p-button label="Info" variant="outlined" severity="info" />
<p-button label="Warn" variant="outlined" severity="warn" />
<p-button label="Help" variant="outlined" severity="help" />
<p-button label="Danger" variant="outlined" severity="danger" />
<p-button label="Contrast" variant="outlined" 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="warn" />
<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="warn" />
<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="warn" [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 " />

Badge #

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


<p-button label="Emails" badge="2" styleClass="m-0" />
<p-button label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" styleClass="m-0" [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="..." fill="var(--primary-color)" />
    </svg>
</p-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-4">Youtube</span>
</p-button>

Keyboard Support

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

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" \| "primary" \| "help" \| "warn" \| "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.
variant	"text" \| "outlined"	null	Specifies the variant of the component.
style	Object	null	Inline style of the element.
styleClass	string	null	Class of the element.
badgeClass	string	null	Style class of the badge.
badgeSeverity	"success" \| "info" \| "primary" \| "help" \| "warn" \| "danger" \| "secondary" \| "contrast"	secondary	Severity type 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.
fluid	boolean	false	Spans 100% width of the container when enabled.
buttonProps	any	null	Used to pass all properties of the ButtonProps to the Button component.

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).

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.

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.
buttonProps	ButtonProps	null	Used to pass all properties of the ButtonProps to the Button component.
severity	"success" \| "info" \| "primary" \| "help" \| "warn" \| "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.
fluid	boolean	false	Spans 100% width of the container when enabled.

class	description
p-button	Class name of the root element
p-button-loading-icon	Class name of the loading icon element
p-button-icon	Class name of the icon element
p-button-label	Class name of the label element