Button

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

Basic

Icons

Loading

Severities

Raised Buttons

Rounded Buttons

Text Buttons

Raised Text Buttons

Outlined Buttons

Rounded Icon Buttons

Rounded Text Icon Buttons

Rounded and Outlined Icon Buttons

Badges

Button Set

Sizes

Template

Import via Module


import { Button } from 'primereact/button';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>

Getting Started

Button is created using the Button element.


<Button />

Label

Text of the button is defined using the label property.


<Button label="Save" />

Icons

Icon on a button is specified with icon property and position is configured using iconPos attribute. Default icon position is "left" and alternative is "right". To display only an icon, leave label as undefined.


<Button label="Click" icon="pi pi-check" />
<Button label="Click" icon="pi pi-check" iconPos="right" />
<Button icon="pi pi-check" iconPos="right" />

Loading

Loading on a button is specified with loading attribute and loading icon can be change with loadingIcon property. To display only a loading, leave label as undefined.


<Button loading />
<Button label="Submit" loading />
<Button label="Submit" loading loadingIcon="pi pi-spin pi-sun" />

Events

Events are defined with the standard notation.


<Button label="Click" onClick={handleClick} />

Severity

Different color options are available as severity levels.

.p-button-secondary
.p-button-success
.p-button-info
.p-button-warning
.p-button-danger


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

Raised and Rounded Buttons

A button can be raised by having "p-button-raised" style class and similarly borders can be made rounded using "p-button-rounded" class.


<Button label="Proceed" className="p-button-raised p-button-rounded" />

Properties

Name	Type	Default	Description
label	string	null	Text of the button.
icon	any	null	Name of the icon or JSX.Element for icon.
iconPos	string	left	Position of the icon, valid values are "left", "right", "top" and "bottom".
badge	string	null	Value of the badge.
badgeClassName	string	null	Style class of the badge.
tooltip	any	null	Content of the tooltip.
tooltipOptions	object	null	Configuration of the tooltip, refer to the tooltip documentation for more information.
disabled	boolean	false	When present, it specifies that the element should be disabled.
visible	boolean	true	When present, it specifies that the element should be visible.
loading	boolean	false	Display loading icon of the button
loadingIcon	any	null	Name of the loading icon or JSX.Element for loading icon.