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

  • selected - Applied to a selected button

  • small - Applied to a small button

icon
String

The icon displayed within the button.

selected

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