The Tag component is used to display categorized labels, status indicators, or metadata in an application. It is designed for clarity and flexibility, supporting different frameworks and customization options.

Importing

The component can be imported via:

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

Usage

Sample

<Tag>Sample</Tag>

Variant

PlumaTag supports multiple variants via the variant prop:

Sample

<Tag>Sample</Tag>

Sample

<Tag variant="path">Sample</Tag>

Sample

<Tag variant="dashed">Sample</Tag>

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.

Sample

<Tag onDelete={() => {}}>Sample</Tag>

Sample

<Tag variant="path" onDelete={() => {}}>Sample</Tag>

Sample

<Tag variant="dashed" onDelete={() => {}}>Sample</Tag>

Compact

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

Sample

<Tag isCompact>Sample</Tag>

Sample

<Tag variant="path" isCompact>Sample</Tag>

Sample

<Tag variant="path" isCompact onDelete={() => {}}>Sample</Tag>

Sample

<Tag variant="dashed" isCompact>Sample</Tag>

Sample

<Tag variant="dashed" isCompact onDelete={() => {}}>Sample</Tag>

API

`PlumaTag` `extends Box`

`isCompact` `boolean | undefined`

Default:false

Whether the tag should render in a smaller style

`isDisabled` `boolean | 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_withDeleteButtonMouseDownStopPropagation` `boolean | undefined`

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

`unsafe_withSpanDeleteButton` `boolean | 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

isCompact boolean | undefined

isDisabled boolean | undefined

onDelete (() => void) | undefined

unsafe_withDeleteButtonMouseDownStopPropagation boolean | undefined

unsafe_withSpanDeleteButton boolean | undefined

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

On this page

`PlumaTag` `extends Box`

`isCompact` `boolean | undefined`

`isDisabled` `boolean | undefined`

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

`unsafe_withDeleteButtonMouseDownStopPropagation` `boolean | undefined`

`unsafe_withSpanDeleteButton` `boolean | undefined`

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