Toggle Button

Components > User Interaction > Toggle Button

Use this component to...

Toggle a boolean value on and off

See this component in action...

Test out this component in a hosted version of the sample app

Overview

Toggle buttons allow the user to quickly toggle a boolean state on or off in a toolbar. Examples might include turning a formatting option like Bold or Italic on/off or showing/hiding a subset of data.

Use a toggle button for toggling a boolean value from a toolbar. Use a checkbox for toggling a boolean value in a form.

Toggle buttons: The Bold button is initially “on”, while the Italic and Underline buttons are “off”

Development

Web component development

Component reference

rui-toggle-button

Module: rui-buttons - Package: @jkhy/responsive-ui-wc

Toggles a boolean value when pressed

Name	Type	Default	Description
value	boolean	false	Bind this to a boolean value in your controller to specify the initial true/false value for the toggle button.
rui-value-change	event		Event fired when the toggle button changes its value. The new value is passed as the event detail.
buttonSize	string	'medium'	One of “medium” or “small”. You’ll typically use the default value of “medium”, although you can use the “small” size for buttons in a toolbar if you’re looking for more compactness.
isDisabled	boolean	false	Specifies whether the button is disabled.

Implementation

Begin by importing the rui-buttons module into your application.

Import the module

// import into app.module
import '@jkhy/responsive-ui-wc/components/rui-buttons/rui-buttons-imports';

Use rui-toggle-button to allow the user to quickly toggle an internal state off or on using a toolbar button. Bind value to a boolean backing value in your controller that tracks the internal state. Add a rui-value-change event handler to update the backing value when the state changes internally within the component. Place the button content within the open and close tags for the component.

Toggle button example

<rui-toggle-button [value]="isBold" (rui-value-change)="isBold = $event.detail">
    <rui-icon iconType="text-bold"></rui-icon>
</rui-toggle-button>

Use rui-toggle-button for toggling a value from a toolbar. Use the rui-toggle component for toggling a value in a form.

Angular wrapper development

Wrapper reference

jha-toggle-button

Module: JhaButtonsModule - Package: @jkhy/responsive-ui-angular

Toggles a boolean value when pressed

Name	Type	Default	Description
jhaValue	boolean	false	Use two-way binding to bind this to a boolean value in your TypeScript that tracks a particular internal state. You must use two-way binding because this value can be changed both within the toggle button and within your TypeScript, so the two must be kept in sync.
jhaValueChange	event		Event fired when the toggle button changes its value. You’ll often use *ngIf to update parts of your app when the toggled boolean value changes, but if you also need to perform other programmatic actions, use this event to do so whenever this value changes.
jhaButtonSize	string	'Medium'	One of “Medium” or “Small”. You’ll typically use the default value of “Medium”, although you can use the “Small” size for buttons in a toolbar if you’re looking for more compactness.
jhaTooltip	string	''	Tooltip displayed when the mouse hovers over the button
jhaIsDisabled	boolean	false	Specifies whether the button is disabled.

jhaThrottleClick

Module: JhaResponsiveCoreModule - Package: @jkhy/responsive-ui-angular

Directive to prevent double click.

Name	Type	Default	Description
See jhaThrottleClick for details.

Implementation

Begin by importing the JhaButtonsModule module into your application.

Import the module

// import into app.module
import { JhaButtonsModule } from '@jkhy/responsive-ui-angular/jha-buttons';

@NgModule({
    imports: [
        ...
        JhaButtonsModule,
        ...
    ]
})

export class AppModule(){}

Use jha-toggle-button to allow the user to quickly toggle an internal state off or on using a toolbar button. Bind jhaValue to a boolean backing value in your controller that tracks the internal state. Add a jhaValueChanged event handler to update the backing value when the state changes internally within the component. Place the button content within the open and close tags for the component.

Toggle button example

<jha-toggle-button [(jhaValue)]="isBold">
    <jha-icon jhaIconType="TextBold"></jha-icon>
</jha-toggle-button>

Use jha-toggle-button for toggling a value from a toolbar. Use the jha-toggle component for toggling a value in a form.

Component playground

Design

Figma design

Figma design info

You can find this component in the Components - Buttons page in the Figma UI Kit.

Dev Component	Design Component Name
Toggle button	RUI / Buttons / Toggle Button Switch on the Toggled property if the toggle button is on. Switch on the IconOnly property if the toggle button only displays an icon.

Dev Component

Design Component Name

Toggle button

RUI / Buttons / Toggle Button

Switch on the Toggled property if the toggle button is on.
Switch on the IconOnly property if the toggle button only displays an icon.

Adobe XD design

Adobe XD design info

You can find this component in these artboards in the Adobe XD design samples:

Sample App - Buttons

Dev Component	Design Component Name
Toggle text button - on	JHA / Buttons / Toggle Text Button / On
Toggle text button - off	JHA / Buttons / Toggle Text Button / Off
Toggle icon button - on	JHA / Buttons / Toggle Icon Button / On
Toggle icon button - off	JHA / Buttons / Toggle Icon Button / Off

Support options

Have questions on this topic?

Join the Responsive UI team in Microsoft Teams to connect with the community.

See something in this page that needs to change?

Send us feedback on this page.

Last updated Wed Sep 25 2024