enact logoEnact
Edit on GitHub

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 size="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 •
ComponentElement

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

iconComponent •
Component

The component used to render the icon.

This component will receive the flip and size 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.

See: ui/Icon.Icon#children
componentRef
ObjectFunction

Called with a reference to the root component.

When using ui/IconButton.IconButton, the ref prop is forwarded to this component as componentRef.

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

  • large - Applied when size prop is 'large'

  • small - Applied when size prop is 'small'

  • 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
flip
'both''horizontal''vertical'

Flip the icon horizontally, vertically or both.

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
size
String

The size of the button.

Applies the CSS class which can be customized by theming.

IconButtonDecoratorHigher-Order Component

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

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