Enact

moonstone/ToggleButton

import ToggleButton from '@enact/moonstone/ToggleButton';

Members

ToggleButtonComponent

moonstone/ToggleButton.ToggleButton is a Button that is Toggleable.

By default, ToggleButton maintains the state of its selected property. Supply the defaultSelected property to control its initial value. If you wish to directly control updates to the component, supply a value to selected at creation time and update it in response to onToggle events.

import ToggleButton from '@enact/moonstone/ToggleButton';

ToggleButtonBaseComponent

moonstone/ToggleButton.ToggleButtonBase is a stateless Button that can be toggled by changing its selected property

import {ToggleButtonBase} from '@enact/moonstone/ToggleButton';
Properties
backgroundOpacity
String

The background-color opacity of this button; valid values are 'opaque', 'translucent', and 'transparent'.

Default: 'opaque'
children
node

The string to be displayed as the main content of the toggle button. If toggleOffLabel and/or toggleOnLabel are provided, they will be used for the respective states.

disabled
Boolean

When true, the {@glossary button} is shown as disabled and does not generate onClick {@glossary event}.

Default: false
minWidth
Boolean

A boolean parameter affecting the minimum width of the button. When true, the minimum width will be set to 180px (or 130px if small is true). If false, the minimum width will be set to the current value of @moon-button-height (thus forcing the button to be no smaller than a circle with diameter @moon-button-height).

Default: true
pressed
Boolean

When true a pressed visual effect is applied to the button

selected
Boolean

Boolean indicating whether toggle button is currently in the 'on' state.

Default: false
small
Boolean

A boolean parameter affecting the size of the button. If true, the button's diameter will be set to 60px. However, the button's tap target will still have a diameter of 78px, with an invisible DOM element wrapping the small button to provide the larger tap zone.

Default: false
toggleOffLabel
String

Button text displayed in the 'off' state. If not specified, children will be used for 'off' button text.

Default: ''
toggleOnLabel
String

Button text displayed in the 'on' state. If not specified, children will be used for 'on' button text.

Default: ''
ArrayBooleanFunctionModuleNumberObjectString