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.


<button pButton>
    <i class="pi pi-check" pButtonIcon></i>
    <span pButtonLabel>Save</span>
</button>

Link #

A button can be rendered as a link when link property is present, while the pButton directive can be applied on an anchor element to style the link as a button.

Angular Website Router Link


<p-button label="Link" link />
<a href="https://angular.dev/" pButton target="_blank" rel="noopener noreferrer">
    <span pButtonLabel>Angular Website</span>
</a>
<a routerLink="/" pButton>
    <span pButtonLabel>Router Link</span>
</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="warn" />
<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="warn" />
<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	ButtonSeverity	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	{ [klass: string]: any }	null	Inline style of the element.
styleClass	string	null	Class of the element.
badgeClass	string	null	Style class of the badge.
badgeSeverity	"info" \| "success" \| "warn" \| "danger" \| "secondary" \| "contrast" \| "help" \| "primary"	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	InputSignalWithTransform<boolean, unknown>	undefined	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	ButtonSeverity	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	InputSignalWithTransform<boolean, unknown>	undefined	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

Button

Import #

Basic #

Directive #

Link #

Icons #

Loading #

Severity #

Disabled #

Raised #

Rounded #

Text #

Raised Text #

Outlined #

Icon Only #

Badge #

Button Group #

Sizes #

Template #

Accessibility #

Screen Reader

Keyboard Support

Button API

Button #

Properties #

Emitters #

Templates #

ButtonDirective #

Properties #

Button Theming

CSS Classes #

Button Design Tokens #

Built-in Presets #

Preset	Implementation	Types
Aura	Aura	Aura
Lara	Lara	Lara
Nora	Nora	Nora
Material	Material	Material

name	token	variable	description
button.root.borderRadius	button.border.radius	--p-button-border-radius	Border radius of root
button.root.roundedBorderRadius	button.rounded.border.radius	--p-button-rounded-border-radius	Rounded border radius of root
button.root.gap	button.gap	--p-button-gap	Gap of root
button.root.paddingX	button.padding.x	--p-button-padding-x	Padding x of root
button.root.paddingY	button.padding.y	--p-button-padding-y	Padding y of root
button.root.iconOnlyWidth	button.icon.only.width	--p-button-icon-only-width	Icon only width of root
button.root.sm.fontSize	button.sm.font.size	--p-button-sm-font-size	Sm font size of root
button.root.sm.paddingX	button.sm.padding.x	--p-button-sm-padding-x	Sm padding x of root
button.root.sm.paddingY	button.sm.padding.y	--p-button-sm-padding-y	Sm padding y of root
button.root.sm.iconOnlyWidth	button.sm.icon.only.width	--p-button-sm-icon-only-width	Sm icon only width of root
button.root.lg.fontSize	button.lg.font.size	--p-button-lg-font-size	Lg font size of root
button.root.lg.paddingX	button.lg.padding.x	--p-button-lg-padding-x	Lg padding x of root
button.root.lg.paddingY	button.lg.padding.y	--p-button-lg-padding-y	Lg padding y of root
button.root.lg.iconOnlyWidth	button.lg.icon.only.width	--p-button-lg-icon-only-width	Lg icon only width of root
button.root.label.fontWeight	button.label.font.weight	--p-button-label-font-weight	Label font weight of root
button.root.raisedShadow	button.raised.shadow	--p-button-raised-shadow	Raised shadow of root
button.root.focusRing.width	button.focus.ring.width	--p-button-focus-ring-width	Focus ring width of root
button.root.focusRing.style	button.focus.ring.style	--p-button-focus-ring-style	Focus ring style of root
button.root.focusRing.offset	button.focus.ring.offset	--p-button-focus-ring-offset	Focus ring offset of root
button.root.badgeSize	button.badge.size	--p-button-badge-size	Badge size of root
button.root.transitionDuration	button.transition.duration	--p-button-transition-duration	Transition duration of root
button.root.primary.background	button.primary.background	--p-button-primary-background	Primary background of root
button.root.primary.hoverBackground	button.primary.hover.background	--p-button-primary-hover-background	Primary hover background of root
button.root.primary.activeBackground	button.primary.active.background	--p-button-primary-active-background	Primary active background of root
button.root.primary.borderColor	button.primary.border.color	--p-button-primary-border-color	Primary border color of root
button.root.primary.hoverBorderColor	button.primary.hover.border.color	--p-button-primary-hover-border-color	Primary hover border color of root
button.root.primary.activeBorderColor	button.primary.active.border.color	--p-button-primary-active-border-color	Primary active border color of root
button.root.primary.color	button.primary.color	--p-button-primary-color	Primary color of root
button.root.primary.hoverColor	button.primary.hover.color	--p-button-primary-hover-color	Primary hover color of root
button.root.primary.activeColor	button.primary.active.color	--p-button-primary-active-color	Primary active color of root
button.root.primary.focusRing.color	button.primary.focus.ring.color	--p-button-primary-focus-ring-color	Primary focus ring color of root
button.root.primary.focusRing.shadow	button.primary.focus.ring.shadow	--p-button-primary-focus-ring-shadow	Primary focus ring shadow of root
button.root.secondary.background	button.secondary.background	--p-button-secondary-background	Secondary background of root
button.root.secondary.hoverBackground	button.secondary.hover.background	--p-button-secondary-hover-background	Secondary hover background of root
button.root.secondary.activeBackground	button.secondary.active.background	--p-button-secondary-active-background	Secondary active background of root
button.root.secondary.borderColor	button.secondary.border.color	--p-button-secondary-border-color	Secondary border color of root
button.root.secondary.hoverBorderColor	button.secondary.hover.border.color	--p-button-secondary-hover-border-color	Secondary hover border color of root
button.root.secondary.activeBorderColor	button.secondary.active.border.color	--p-button-secondary-active-border-color	Secondary active border color of root
button.root.secondary.color	button.secondary.color	--p-button-secondary-color	Secondary color of root
button.root.secondary.hoverColor	button.secondary.hover.color	--p-button-secondary-hover-color	Secondary hover color of root