ToggleButton

ToggleButton is used to select a boolean value using a button.

Basic

Customized

I reject

Import via Module


import { ToggleButton } from 'primereact/togglebutton';

Import via CDN


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

Getting Started

ToggleButton is used as a controlled input with checked and onChange properties.


<ToggleButton checked={checked1} onChange={(e) => setChecked1(e.value)} />

Labels and Icons

Icons and Labels can be customized using onLabel, offLabel, onIcon and offIcon properties.


<ToggleButton onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" checked={checked2} onChange={(e) => setChecked2(e.value)} />

Properties

Any valid attribute is passed to the root element implicitly, extended properties are as follows;

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
onIcon	string	null	Icon for the on state.
offIcon	string	null	Icon for the off state.
onLabel	string	yes	Label for the on state.
offLabel	string	no	Label for the off state.
style	string	null	Inline style of the element.
className	string	null	Style class of the element.
checked	boolean	false	Specifies the on/off state of the button.
tabIndex	number	0	Index of the element in tabbing order.
iconPos	string	left	Position of the icon, valid values are "left" and "right".
tooltip	any	null	Content of the tooltip.
tooltipOptions	object	null	Configuration of the tooltip, refer to the tooltip documentation for more information.

Events

Name	Parameters	Description
onChange	event.originalEvent: Browser event event.value: Value as the checked state.	Callback to invoke on value change.
onFocus	event: Browser event	Callback to invoke when autocomplete gets focus.
onBlur	event: Browser event	Callback to invoke when autocomplete loses focus.