ui/ Labeled Icon
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
The label.
This accepts strings, DOM, and Components, if you need more elaborate features. It may be positioned using
labelPosition
.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 classicon
- The icon component classiconCell
- Applied to theiconComponent
directly, like.icon
. Ificon
in a React component, this class is applied to the container of the icon, rather than the icon itself.label
- The label component classinline
- Applied when the inline prop is setabove
- Applied when the labelPosition prop is set to aboveafter
- Applied when the labelPosition prop is set to afterbefore
- Applied when the labelPosition prop is set to beforebelow
- Applied when the labelPosition prop is set to belowleft
- Applied when the labelPosition prop is set to leftright
- Applied when the labelPosition prop is set to right
Disables the component and becomes non-interactive.
Default: falseFlip the icon horizontally, vertically or both.
The icon.
This will be passed as
children
to theiconComponent
, unless you supply a React element (like JSX) to this prop, directly or via the<icon>
slot.The component used to render the
icon
.This will receive the
icon
prop aschildren
and should handle it appropriately. This prop is ignored in the case of a component being passed into theicon
prop. It will also receive theflip
andsize
props as set on the component.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: falseThe 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'The size of the icon.
Applies either the
small
orlarge
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';