Enact

moonstone/IconButton

An moonstone/Icon.Icon that acts like a button.

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

Members

IconButtonComponent

An moonstone/Icon.Icon that acts like a button. You may specify an image or a font-based icon by setting the children to either the path to the image or a string from the IconList. IconButton does not have Marquee or Uppercase like Button has, as it should not contain text.

Usage:

<IconButton onClick={handleClick} small>
    plus
</IconButton>
import IconButton from '@enact/moonstone/IconButton';

IconButtonBaseComponent

An moonstone/Icon.Icon that acts like a button. You may specify an image or a font-based icon by setting the children to either the path to the image or a string from the IconList. Note: Unlike many Base versions, IconButtonBase includes a Higher-order Component to optimize icon rendering.

import {IconButtonBase} from '@enact/moonstone/IconButton';
Properties
backgroundOpacity
String

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

Default: 'opaque'
children
StringObject

The icon displayed within the button.

See: moonstone/Icon.Icon#children
color
String

This property accepts one of the following color names, which correspond with the colored buttons on a standard remote control: 'red', 'green', 'yellow', 'blue'

disabled
Boolean

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

Default: false
noAnimation ✘
Boolean

When true, the button does not animate on press. Note that the default value will change to false in 2.0.0

This is deprecated.

Default: true
pressed
Boolean

When true, a pressed visual effect is applied to the icon button

selected
Boolean

When true, a selected visual effect is applied to the icon button

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

IconButtonFactoryComponent Factory❌

This is deprecated.

A Factory wrapper around events that allows overriding certain classes of the IconButton component at design time.

import {IconButtonFactory} from '@enact/moonstone/IconButton';

IconButtonFactoryComponent Factory❌

This is deprecated.

A Factory wrapper around moonstone/IconButton.IconButtonBase that allows overriding certain classes of the base IconButton component at design time.

import {IconButtonFactory} from '@enact/moonstone/IconButton';
ArrayBooleanFunctionModuleNumberObjectString