moonstone/LabeledIconButton

An Icon that acts like a Button decorated with a label.

You may specify an image or a font-based icon by setting the icon to either the path to the image or a string from an iconList.

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

Members

LabeledIconButtonComponent

A Moonstone-styled icon button component with a label.

Usage:

<LabeledIconButton icon="star" labelPosition="after">
  Favorite
</LabeledIconButton>
import LabeledIconButton from '@enact/moonstone/LabeledIconButton';

LabeledIconButtonBaseComponent

An icon button component with a label.

import {LabeledIconButtonBase} from '@enact/moonstone/LabeledIconButton';
Properties
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:

  • labeledIconButton - The root component class

  • icon - The icon component class

  • label - The label component class

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

  • selected - Applied to a selected button

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

flip
'both''horizontal''vertical'

Flip the icon horizontally, vertically or both.

icon
String

The icon displayed within the button.

selected
Boolean

Selects the component.

Setting selected may be useful when the component represents a toggleable option. The visual effect may be customized using the css prop.

LabeledIconButtonDecoratorHigher-Order Component

Adds Moonstone specific behaviors to LabeledIconButtonBase.

import {LabeledIconButtonDecorator} from '@enact/moonstone/LabeledIconButton';
ArrayBooleanFunctionModuleNumberObjectString