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

Basic - ({{checked1}})

Customized - ({{checked2}})

Import

import {ToggleButton} from 'primeng/primeng';

Getting Started

ToggleButton is defined using p-toggleButton element. Checked property supports two-way binding to retrieve and assign the model.

<p-toggleButton [(checked)]="checked"></p-toggleButton>
export class ModelComponent {

    checked: boolean;

}

As model is two-way binding enabled, setting the bound value as true displays the state as checked.

export class ModelComponent {

   checked: boolean = true;

}

Customization

Icons and Labels can be customized using onLabel, offLabel, onIcon and OffIcon attributes.

<p-toggleButton onLabel="I confirm" offLabel="I reject" 
        onIcon="fa-check-square" offIcon="fa-square" [(checked)]="val"></p-toggleButton>

Attributes

Name Type Default Description
onLabel string yes Label for the on state.
offLabel string no Label for the off state.
onIcon string null Icon for the on state.
offIcon string null Icon for the off state.
style string null Inline style of the element.
styleClass string null Style class of the element.
disabled boolean false When present, it specifies that the element should be disabled.

Events

Name Parameters Description
onChange event.originalEvent: browser event
evebt.checked: boolean value to represent checked state.
Callback to invoke on state change.
<p-toggleButton (onChange)="handleChange($event)" [(checked)]="val">
export class ModelComponent {
    
    handleChange(e) {
        var isChecked = e.checked;
    }
}

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name Element
ui-togglebutton Container element
ui-button-icon-left Icon element.
ui-button-text Label element.

Dependencies

jQuery, jQuery UI WidgetFactory API, PrimeUI ToggleButton.

<h3 class="first">Basic - ({{checked1}})</h3>
<p-toggleButton [(checked)]="checked1" style="width:150px"></p-toggleButton>

<h3>Customized - ({{checked2}})</h3>
<p-toggleButton onLabel="I confirm" offLabel="I reject" onIcon="fa-check-square" offIcon="fa-square" [(checked)]="checked2" style="width:150px"></p-toggleButton>
export class ToggleButtonDemoComponent {
    
    checked1: boolean = false;

    checked2: boolean = true;
}