enact logoEnact
Edit on GitHub

ui/ToggleIcon

An unstyled icon component that handles interaction and toggles state between activated and deactivated.

Visually, it may be to be customized by a theme or application to represent any state.

import ToggleIcon from '@enact/ui/ToggleIcon';

Members

ToggleIconComponent

Represents a Boolean state, and can accept any icon to toggle.

import ToggleIcon from '@enact/ui/ToggleIcon';
Properties
onToggle
Function

The handler to run when the component is toggled.

ToggleIconBaseComponent

Represents a Boolean state, and can accept any icon to toggle.

import {ToggleIconBase} from '@enact/ui/ToggleIcon';
Properties
children
StringObject

The icon to use for this component.

See: ui/Icon.Icon.children
componentRef
ObjectFunction

Called with a reference to the root component.

When using ui/ToggleIcon.ToggleIcon, the ref prop is forwarded to this component as componentRef.

css
Object

Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal elements and states of this component.

The following classes are supported:

  • toggleIcon - The root class name

  • icon - The background node of the button

  • selected - Applied to a selected button

disabled
Boolean

Disables ToggleIcon.

Default: false
iconClasses
String

CSS classes to be used on the Icon component

iconComponent
StringComponent

The component used to render the icon.

Default: 'div'
selected
Boolean

Sets whether this control is in the 'on' or 'off' state. true for 'on', false for 'off'.

Default: false

ToggleIconDecoratorComponent

Adds support for the onToggle prop callback to be fired when the onTap (touch-safe onClick) event executes.

import {ToggleIconDecorator} from '@enact/ui/ToggleIcon';
ArrayBooleanFunctionModuleNumberObjectString