Theme

MCP Server

Getting started

Contributing

Breaking Changes

FormattedRelativeTime

Combobox with Add New

Density

Inline Form Controls

Refinement levers

Search with DropdownMenu

Componentsv2.170.1

Iconsv1.15.0

MCPv0.8.18

Tokensv0.34.1

Label

Labels are read-only indicators used to communicate a category, metadata, or process's current state.

Importing

The component can be imported via:

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

Usage

Default

<Label>Default</Label>

Colors

The Label component accepts a range of colors via the color prop, the default being grey:

Red

<Label color="red">Red</Label>

Raspberry

<Label color="raspberry">Raspberry</Label>

Clementine

<Label color="clementine">Clementine</Label>

Yellow

<Label color="yellow">Yellow</Label>

Green

<Label color="green">Green</Label>

Teal

<Label color="teal">Teal</Label>

Blue

<Label color="blue">Blue</Label>

Plum

<Label color="plum">Plum</Label>

Purple

<Label color="purple">Purple</Label>

Grey

<Label color="grey">Grey</Label>

Outline

<Label color="outline">Outline</Label>

Text style

By default, the text in a label renders in a bold font. By calling the component with the bold set to false, it renders in a lighter weight:

Light text

<Label bold={false}>Light text</Label>

In certain scenarios, a PlumaLabel may be used to indicate the current status of a process or item. By enabling the showStatusIndicator argument, a PlumaLabel will render with a colored dot to communicate the status:

Failed

<Label showStatusIndicator={true} color="red">Failed</Label>

Attempted

<Label showStatusIndicator={true} color="yellow">Attempted</Label>

Delivered

<Label showStatusIndicator={true} color="green">Delivered</Label>

Bounced

<Label showStatusIndicator={true} color="grey">Bounced</Label>

Note: The status indicator is only available for the following colors:

red
yellow
green
grey

Attempting to enable the status indicator with a different color will throw an error. Similarly, the light text version of bold={false} is also not allowed.

API

`Label` `extends Text`

`bold` `boolean | undefined`

Default:true

Whether the label should render in a bold font weight

`color` `"outline" | "blue" | "green" | "grey" | "plum" | "purple" | "red" | "teal" | "yellow" | "raspberry" | "clementine" | undefined`

Default:grey

The visual style of the label. Note: When using status indicators, only red, yellow, green, blue, purple, and grey colors are supported.

`showStatusIndicator` `boolean | undefined`

Default:false

Whether the label should show a status indicator colored dot

Label

Importing

Usage

Colors

Text style

Status indicator

API

`Label` `extends Text`

`bold` `boolean | undefined`

`color` `"outline" | "blue" | "green" | "grey" | "plum" | "purple" | "red" | "teal" | "yellow" | "raspberry" | "clementine" | undefined`

`showStatusIndicator` `boolean | undefined`

On this page

Label

Importing

Usage

Colors

Text style

Status indicator

API

Label extends Text

bold boolean | undefined

color "outline" | "blue" | "green" | "grey" | "plum" | "purple" | "red" | "teal" | "yellow" | "raspberry" | "clementine" | undefined

showStatusIndicator boolean | undefined

On this page

`Label` `extends Text`

`bold` `boolean | undefined`

`color` `"outline" | "blue" | "green" | "grey" | "plum" | "purple" | "red" | "teal" | "yellow" | "raspberry" | "clementine" | undefined`

`showStatusIndicator` `boolean | undefined`