moonstone/ Icon Button
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
The background-color opacity of this icon button; valid values are
'opaque'
,'translucent'
,'lightTranslucent'
, and'transparent'
.Default: 'opaque'- children
The icon displayed within the button.
- color
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
When
true
, the {@glossary button} is shown as disabled and does not generateonClick
{@glossary event}.Default: false- noAnimation ✘
When
true
, the button does not animate on press. Note that the default value will change tofalse
in 2.0.0This is deprecated.
Default: true- pressed
When
true
, a pressed visual effect is applied to the icon button- selected
When
true
, a selected visual effect is applied to the icon button- small
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';