Pluma

Theme

About

MCP Server

Getting started

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

Badge

PlumaBadge renders a numeric label to indicate the quantity of an item or content.

Importing

The component can be imported via:

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

Usage

123

<Badge>123</Badge>

Variations

PlumaBadge supports an outlined and an emphasized variant via the isOutline and isEmphasized props:

123

<Badge>123</Badge>

123

<Badge isOutline={true}>123</Badge>

123

<Badge isEmphasized={true}>123</Badge>

123

<Badge isOutline={true} isEmphasized={true}>123</Badge>

API

`PlumaBadge` `extends Box`

`isEmphasized` `boolean | undefined`

Whether the badge should render in "emphasis" variant

`isOutline` `boolean | undefined`

Whether the badge should render in the "outlined" variant

Badge

Importing

Usage

Variations

API

PlumaBadge extends Box

isEmphasized boolean | undefined

isOutline boolean | undefined

On this page

`PlumaBadge` `extends Box`

`isEmphasized` `boolean | undefined`

`isOutline` `boolean | undefined`