React ToggleButton is used to select a boolean value using a button.
<h3 id="setup">Setup</h3>
Refer to PrimeReact <a target="_blank" href="https://primefaces.org/primereact/showcase/#/setup">setup documentation</a> for download and installation steps for your environment.
<h3 id="import">Import</h3>
<pre><code class="lang-js">import { ToggleButton } from 'primereact/togglebutton';
</code></pre>
<h3 id="getting-started">Getting Started</h3>
ToggleButton is used as a controlled input with checked and onChange properties.
<pre><code class="lang-html">&lt;ToggleButton checked={checked1} onChange={(e) =&gt; setChecked1(e.value)} /&gt;
</code></pre>
<h3 id="labels-and-icons">Labels and Icons</h3>
Icons and Labels can be customized using onLabel, offLabel, onIcon and offIcon properties.
<pre><code class="lang-html">&lt;ToggleButton onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" checked={checked2} onChange={(e) =&gt; setChecked2(e.value)} /&gt;
</code></pre>
<h3 id="theming">Theming</h3>
ToggleButton supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the <a target="_blank" href="https://primefaces.org/primereact/showcase/#/theming">Designer</a> tool.
<h3 id="resources">Resources</h3>
Visit the PrimeReact <a target="_blank" href="https://primefaces.org/primereact/showcase/#/togglebutton">ToggleButton</a> showcase for demos and documentation.

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

### Setup

Refer to PrimeReact [setup documentation](https://primefaces.org/primereact/showcase/#/setup) for download and installation steps for your environment.

### Import

```js
import { ToggleButton } from 'primereact/togglebutton';
``` 

### Getting Started

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

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

### Labels and Icons

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

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

### Theming

ToggleButton supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the [Designer](https://primefaces.org/primereact/showcase/#/theming) tool.

### Resources

Visit the PrimeReact [ToggleButton](https://primefaces.org/primereact/showcase/#/togglebutton) showcase for demos and documentation.