Enact
Edit on GitHub

ui/LabeledIcon

Provides unstyled LabeledIcon components to be customized by a theme or application.

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

Members

LabeledIconComponent

An icon component with a label without any behaviors applied to it.

Usage:

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

LabeledIconBaseComponent

An icon component with a label.

import {LabeledIconBase} from '@enact/ui/LabeledIcon';
Properties
children
Node

The label.

This accepts strings, DOM, and Components, if you need more elaborate features. It may be positioned using labelPosition.

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:

  • labeledIcon - The root component class

  • icon - The icon component class

  • iconCell - Applied to the iconComponent directly, like .icon. If icon in a React component, this class is applied to the container of the icon, rather than the icon itself.

  • label - The label component class

  • inline - Applied when the inline prop is set

  • above - Applied when the labelPosition prop is set to above

  • after - Applied when the labelPosition prop is set to after

  • before - Applied when the labelPosition prop is set to before

  • below - Applied when the labelPosition prop is set to below

  • left - Applied when the labelPosition prop is set to left

  • right - Applied when the labelPosition prop is set to right

disabled
Boolean

Disables the component and becomes non-interactive.

Default: false
flip
'both''horizontal''vertical'

Flip the icon horizontally, vertically or both.

icon
StringElementComponent

The icon.

This will be passed as children to the iconComponent, unless you supply a React element (like JSX) to this prop, directly or via the <icon> slot.

iconComponent
Component

The component used to render the icon.

This will receive the icon prop as children and should handle it appropriately. This prop is ignored in the case of a component being passed into the icon prop. It will also receive the flip and size props as set on the component.

inline
Boolean

Enables this component to be used in an "inline" context.

This is useful for when you have several of these components in a row and are not using a Layout or flex-box configuration.

Default: false
labelPosition
'above''after''before''below''left''right'

The position of the label in relation to the icon element.

Allowed values include:

  • 'below' (default),

  • 'above',

  • 'left',

  • 'right',

  • 'before', and

  • 'after'.

The 'before' and 'after' values automatically swap sides when in an RTL locale context.

Default: 'below'
size
'large''small'

The size of the icon.

Applies either the small or large CSS class which can be customized by theming.

Default: 'large'

LabeledIconDecoratorHigher-Order Component

A higher-order component that adds slot support to LabeledIconBase

import {LabeledIconDecorator} from '@enact/ui/LabeledIcon';
ArrayBooleanFunctionModuleNumberObjectString