LabelIcon

Importing

import { LabelIcon } from '@customerio/pluma-components/react';

<LabelIcon name="check" />

Color

The color argument can be used to customize the color of the icon and its background, the default being grey:

<LabelIcon name="check" color="red" />

<LabelIcon name="check" color="raspberry" />

<LabelIcon name="check" color="clementine" />

<LabelIcon name="check" color="yellow" />

<LabelIcon name="check" color="green" />

<LabelIcon name="check" color="teal" />

<LabelIcon name="check" color="blue" />

<LabelIcon name="check" color="plum" />

<LabelIcon name="check" color="purple" />

<LabelIcon name="check" color="grey" />

Shape

The shape argument can be used to customize the shape of the icon background, the default being circle:

<LabelIcon name="check" shape="circle" />

<LabelIcon name="check" shape="square" />

Size

The size argument can be used to customize the size of the icon and its background padding, the default being sm:

<LabelIcon name="check" size="sm" />

<LabelIcon name="check" size="md" />

<LabelIcon name="check" size="lg" />

Accessibility

By default, aria-hidden is applied to all label icons. The best practice is to only use icons in context. That is, icons should only be used for presentation, while the text they're surrounded by is the real source of context.

Many icons aren't universally recognized by everyone, which is one of the reasons why it's important to not use icons on their own.

If an icon does need to be used without context, the component accepts a label argument. When present, aria-hidden will be removed, and instead aria-label will be applied to the icon.

<LabelIcon name="campaigns" label="Inspect this icon to see the rendered HTML" />