enact logoEnact
Edit on GitHub

moonstone/ToggleButton

Provides a Moonstone-themed toggle button component and behaviors.

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

Members

ToggleButtonComponent

A toggleable button.

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

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.

  • Values: 'translucent', 'lightTranslucent', 'transparent'

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

Disables the button.

Default: false
minWidth
Boolean

Enforces a minimum width on the Button.

NOTE: This property's default is true and must be explicitly set to false to allow the button to shrink to fit its contents.

Default: true
pressed
Boolean

Applies a pressed visual effect.

selected
Boolean

Indicates the button is 'on'.

Default: false
size
'small''large'

The size of the button.

A 'small' button will have a larger tap target than its apparent size to allow it to be clicked more easily.

Default: 'large'
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