React Button is an extension to standard input element with icons and theming.
Setup
Refer to PrimeReact setup documentation for download and installation steps for your environment.
Import
import { Button } from 'primereact/button';
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" />
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" />
Theming
Button supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeReact Button showcase for demos and documentation.