Pluma

Theme

Foundations

Content

Icons

FormattedRelativeTime

Alpha

Menu keyboard shortcuts

Setup flow with a preview

Tag

Figma

Github

Storybook

Tags represent user-generated, interactive categorization — items a person can add, apply, and remove, like filter criteria or audience attributes.

Importing

The component can be imported via:

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

Usage

Loading editor

Variant

PlumaTag supports multiple variants via the variant prop:

Loading editor

Close button

A close button can be added to PlumaTag when the onDelete prop is provided, which will be called when the button is clicked.

Loading editor

Compact

A compact (smaller) version of the tag can be rendered with the isCompact prop:

Loading editor

API

`PlumaTag` `extends Box`

`isCompactboolean | undefined`

Default:false

Whether the tag should render in a smaller style

`isDisabledboolean | undefined`

Default:false

Whether the tag is disabled

`onDelete(() => void) | undefined`

Function to call when the "X" close button is clicked. Providing this prop will render the close button.

`unsafe_withDeleteButtonMouseDownStopPropagationboolean | undefined`

Whether to call event.stopPropagation() in the onMouseDown event of the delete button.

`unsafe_withSpanDeleteButtonboolean | undefined`

Whether the delete button should render as a span with role="button" (instead of a button element)

`variant"default" | "dashed" | "path" | undefined`

Default:default

The variant of the tag

Tag

Importing

Usage

Variant

Close button

Compact

API

PlumaTag extends Box

isCompactboolean | undefined

isDisabledboolean | undefined

onDelete(() => void) | undefined

unsafe_withDeleteButtonMouseDownStopPropagationboolean | undefined

unsafe_withSpanDeleteButtonboolean | undefined

variant"default" | "dashed" | "path" | undefined

On this page

`PlumaTag` `extends Box`

`isCompactboolean | undefined`

`isDisabledboolean | undefined`

`onDelete(() => void) | undefined`

`unsafe_withDeleteButtonMouseDownStopPropagationboolean | undefined`

`unsafe_withSpanDeleteButtonboolean | undefined`

`variant"default" | "dashed" | "path" | undefined`