Label

Importing

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

Usage

Colors

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

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:

Status indicator

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:

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.