enact logoEnact
Edit on GitHub

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

data-webos-voice-disabled
Boolean

Disables voice control.

data-webos-voice-group-label
String

The voice control group label.

data-webos-voice-intent
String

The voice control intent.

data-webos-voice-label
String

The voice control label.

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