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
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 small prop 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
String

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'
small
Boolean

Reduces the size of the icon component.

The value of small is forwarded on to iconComponent.

Default: false

LabeledIconDecoratorHigher-Order Component

A higher-order component that adds slot support to LabeledIconBase

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