ui/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. This is unstyled, but can easily be extended and customized by a theme or application.

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

Members

IconButtonComponent

A minimally styled, but interactive, Button ready for customization by a theme.

Example:

<IconButton small>
    plus
</IconButton>
import IconButton from '@enact/ui/IconButton';

IconButtonBaseComponent

A ui-styled button without any behavior.

import {IconButtonBase} from '@enact/ui/IconButton';
Properties
buttonComponent
FunctionElement

This is the root component used to render the button and will receive all props except icon.

iconComponent
Function

The component used to render the icon.

This component will receive the small property set on the IconButton as well as the icon class to customize its styling.

children
Node

Additional children that follow the icon.

If icon isn't specified but children is, children is used as the icon's value.

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 component class

  • icon - The icon component class

  • small - Applied when small prop is true

  • pressed - Applied when pressed prop is true

disabled
Boolean

Disables IconButton.

When true, the button is shown as disabled and does not generate onClick events.

Default: false
icon
String

The icon displayed within the IconButton.

If not specified, children is used as the icon value instead.

pressed
Boolean

Applies the pressed CSS class.

Default: false
selected
Boolean

Applies the selected CSS class.

Default: false
small
Boolean

Applies the small CSS class.

Default: false

IconButtonDecoratorHigher-Order Component

A higher-order component that adds universal button behaviors to an IconButtonBase.

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