enact logoEnact
Edit on GitHub

moonstone/IconButton

An 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 an iconList.

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

Members

IconButtonComponent

IconButton does not have Marquee like Button has, as it should not contain text.

Usage:

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

IconButtonBaseComponent

A moonstone-styled icon button without any behavior.

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

The background-color opacity of this icon button.

Valid values are:

  • 'translucent',

  • 'lightTranslucent', and

  • 'transparent'.

color
String

The color of the underline beneath the icon.

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

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:

  • iconButton - The root class name

  • bg - The background node of the icon button

  • large - Applied to a size='large' icon button

  • selected - Applied to a selected icon button

  • small - Applied to a size='small' icon button

IconButtonDecoratorHigher-Order Component

Moonstone-specific button behaviors to apply to IconButton.

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