Button

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


import { Button } from 'primereact/button';
         

Button is created using the Button element.


<Button label="Submit" aria-label="Submit" />
<Button label="Disabled" disabled />
<Button label="Link" className="p-button-link" />
         

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

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 label="Submit" loading />
<Button label="Submit" iconPos="right" loading />
<Button label="Submit" icon="pi pi-check" loading={loading1} onClick={onLoadingClick1} />
<Button label="Submit" loading={loading2} onClick={onLoadingClick2} />
         

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="Help" className="p-button-help" />
<Button label="Danger" className="p-button-danger" />
         

Button is created using the Button element.


<Button disabled label="Submit" aria-label="Submit" />
         

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="Primary" className="p-button-raised" />
<Button label="Secondary" className="p-button-raised p-button-secondary" />
<Button label="Success" className="p-button-raised p-button-success" />
<Button label="Info" className="p-button-raised p-button-info" />
<Button label="Warning" className="p-button-raised p-button-warning" />
<Button label="Help" className="p-button-raised p-button-help" />
<Button label="Danger" className="p-button-raised p-button-danger" />
         

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="Primary" className="p-button-rounded" />
<Button label="Secondary" className="p-button-rounded p-button-secondary" />
<Button label="Success" className="p-button-rounded p-button-success" />
<Button label="Info" className="p-button-rounded p-button-info" />
<Button label="Warning" className="p-button-rounded p-button-warning" />
<Button label="Help" className="p-button-rounded p-button-help" />
<Button label="Danger" className="p-button-rounded p-button-danger" />
         

Text Button


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

Raised Text Button


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

Outlined Buttons


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

Rounded Icon Buttons


<Button icon="pi pi-bookmark" className="p-button-rounded p-button-secondary" aria-label="Bookmark" />
<Button icon="pi pi-search" className="p-button-rounded p-button-success" aria-label="Search" />
<Button icon="pi pi-user" className="p-button-rounded p-button-info" aria-label="User" />
<Button icon="pi pi-bell" className="p-button-rounded p-button-warning" aria-label="Notification" />
<Button icon="pi pi-heart" className="p-button-rounded p-button-help" aria-label="Favorite" />
<Button icon="pi pi-times" className="p-button-rounded p-button-danger" aria-label="Cancel" />
<Button icon="pi pi-check" className="p-button-rounded" aria-label="Filter" />
         

Rounded Text Icon Buttons


<Button icon="pi pi-check" className="p-button-rounded p-button-text" aria-label="Submit" />
<Button icon="pi pi-bookmark" className="p-button-rounded p-button-secondary p-button-text" aria-label="Bookmark" />
<Button icon="pi pi-search" className="p-button-rounded p-button-success p-button-text" aria-label="Search" />
<Button icon="pi pi-user" className="p-button-rounded p-button-info p-button-text" aria-label="User" />
<Button icon="pi pi-bell" className="p-button-rounded p-button-warning p-button-text" aria-label="Notification" />
<Button icon="pi pi-heart" className="p-button-rounded p-button-help p-button-text" aria-label="Favorite" />
<Button icon="pi pi-times" className="p-button-rounded p-button-danger p-button-text" aria-label="Cancel" />
<Button icon="pi pi-filter" className="p-button-rounded p-button-text p-button-plain" aria-label="Filter" />
         

Rounded and Outlined Icon Buttons


<Button icon="pi pi-check" className="p-button-rounded p-button-outlined" aria-label="Submit" />
<Button icon="pi pi-bookmark" className="p-button-rounded p-button-secondary p-button-outlined" aria-label="Bookmark" />
<Button icon="pi pi-search" className="p-button-rounded p-button-success p-button-outlined" aria-label="Search" />
<Button icon="pi pi-user" className="p-button-rounded p-button-info p-button-outlined" aria-label="User" />
<Button icon="pi pi-bell" className="p-button-rounded p-button-warning p-button-outlined" aria-label="Notification" />
<Button icon="pi pi-heart" className="p-button-rounded p-button-help p-button-outlined" aria-label="Favorite" />
<Button icon="pi pi-times" className="p-button-rounded p-button-danger p-button-outlined" aria-label="Cancel" />
         

Badges


<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" className="p-button-warning" badge="8" badgeClassName="p-badge-danger" />
         

Button Set


<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" />
         

Sizes


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

Template


<Button className="google p-0" aria-label="Google"><i className="pi pi-google px-2"></i><span className="px-3">Google</span></Button>
<Button className="youtube p-0" aria-label="Youtube"><i className="pi pi-youtube px-2"></i><span className="px-3">Youtube</span></Button>
<Button className="vimeo p-0" aria-label="Vimeo"><i className="pi pi-vimeo px-2"></i><span className="px-3">Vimeo</span></Button>
<Button className="facebook p-0" aria-label="Facebook"><i className="pi pi-facebook px-2"></i><span className="px-3">Facebook</span></Button>
<Button className="twitter p-0" aria-label="Twitter"><i className="pi pi-twitter px-2"></i><span className="px-3">Twitter</span></Button>
<Button className="slack p-0" aria-label="Slack"><i className="pi pi-slack px-2"></i><span className="px-3">Slack</span></Button>
<Button className="amazon p-0" aria-label="Amazon"><i className="pi pi-amazon px-2"></i><span className="px-3">Amazon</span></Button>
<Button className="discord p-0" aria-label="Discord"><i className="pi pi-discord px-2"></i><span className="px-3">Discord</span></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-textLabel 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.


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

<Button icon="pi pi-check" label="Submit" />

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

Keyboard Support

KeyFunction
tabMoves focus to the button.
enterActivates the button.
spaceActivates the button.
Visit the API documentation for detailed information about all the properties, events and methods of the component.