Forma 36

PillNext

Give feedback

Alpha component

PillNext component is subject to major changes and is for experimentation purposes only. Not recommended for use in production software.

PillNext is a refreshed pill component for communicating category or metadata in a compact format. It supports four visual variants, an optional leading icon with tooltip, and an optional removable end icon.

Alpha: This component is in alpha. Props may change before promotion to stable.

Import

import { PillNext } from '@contentful/f36-pill-next';

Examples

Variants

function PillNextVariantsExample() {

  return (

    <Stack flexDirection="row">

      <PillNext label="Secondary" variant="secondary" />

      <PillNext label="Primary" variant="primary" />

      <PillNext label="Warning" variant="warning" />

      <PillNext label="Negative" variant="negative" />

    </Stack>

  );

}
Open in Playground

Removable

function PillNextRemovableExample() {

  return (

    <Stack flexDirection="row">

      <PillNext label="Removable" onRemove={() => {}} />

      <PillNext label="Disabled remove" onRemove={() => {}} isDisabled />

    </Stack>

  );

}
Open in Playground

Warning and negative with tooltip

function PillNextWarningExample() {

  return (

    <Stack flexDirection="row">

      <PillNext

        label="Restricted"

        variant="warning"

        tooltipContent="This tag has restricted visibility"

        onRemove={() => {}}

      />

      <PillNext

        label="Deleted"

        variant="negative"

        tooltipContent="This tag was deleted"

        onRemove={() => {}}

      />

    </Stack>

  );

}
Open in Playground

Props (API reference)

Open in Storybook

Name

Type

Default

label
required
string

children
ReactNode

Content rendered between label and remove button.

className
string

CSS class to be appended to the root element

isDisabled
false
true

onRemove
() => void

removeButtonClassName
string

Additional className applied to the remove button.

removeButtonLabel
string

"Remove"
removeIconColor
string

Color of the remove icon. Defaults to currentColor (inherits from button).

testId
string

A [data-test-id] attribute used for testing purposes

tooltipContent
string

Only rendered for variants with a leading icon (warning/negative).

tooltipProps
Omit<CommonProps & WithEnhancedContent & TooltipInternalProps, "content" | "children" | "withTriggerWrapper">

variant
"secondary"
"primary"
"warning"
"negative"

Variants

| Variant | Use case | | --------- | ---------------------------------------------------- | | secondary | Default. General-purpose category or metadata label. | | primary | Highlighted or active selection. | | warning | Restricted access or limited visibility. | | negative | Deleted or errored state. |

Accessibility

  • The remove button is the only focusable element by default. Tab focuses it; Enter/Space triggers removal.
  • When tooltipContent is provided, the leading icon becomes keyboard-focusable so screen reader and keyboard users can access the explanation.
  • When disabled, the remove button is removed from tab order and does not fire events.
  • PillNext does not truncate labels. The pill expands horizontally to accommodate the full text.

Tag

Tag is a metadata-oriented pill with a required badge slot. It composes the same visual base as PillNext and adds a badge qualifier between the label and end icon. Use Tag when a label needs supporting metadata; use PillNext when a single label is enough.

Import

import { Tag } from '@contentful/f36-pill-next';

Examples

Basic variants

function TagBasicExample() {

  return (

    <Stack flexDirection="row">

      <Tag

        label="Secondary"

        variant="secondary"

        badge={<Badge variant="secondary">Draft</Badge>}

      />

      <Tag

        label="Primary"

        variant="primary"

        badge={<Badge variant="primary">Published</Badge>}

      />

      <Tag

        label="Warning"

        variant="warning"

        badge={<Badge variant="warning">Restricted</Badge>}

      />

      <Tag

        label="Negative"

        variant="negative"

        badge={<Badge variant="negative">Deleted</Badge>}

      />

    </Stack>

  );

}
Open in Playground

With badge

function TagWithBadgeExample() {

  return (

    <Stack flexDirection="row">

      <Tag

        label="Blog post"

        variant="secondary"

        badge={<Badge variant="secondary">Draft</Badge>}

      />

      <Tag

        label="Landing page"

        variant="primary"

        badge={<Badge variant="primary">Published</Badge>}

      />

    </Stack>

  );

}
Open in Playground

Removable with badge and tooltip

function TagRemovableExample() {

  return (

    <Stack flexDirection="row">

      <Tag

        label="Category"

        variant="secondary"

        badge={<Badge variant="secondary">3 items</Badge>}

        onRemove={() => console.log('removed')}

      />

      <Tag

        label="Restricted"

        variant="warning"

        badge={<Badge variant="warning">Limited</Badge>}

        tooltipContent="This tag has restricted visibility"

        onRemove={() => console.log('removed')}

      />

    </Stack>

  );

}
Open in Playground

Props (API reference)

Badge slot

The badge prop is required and accepts any React node. It is rendered between the label and the remove button. The spec does not prescribe a specific badge component — consumers supply the rendered element (e.g. <Badge> from @contentful/f36-badge).

The badge variant does not have to correspond with the Tag variant — for example, a secondary Tag can contain a primary or warning badge to communicate independent status information.

Accessibility

Tag inherits all accessibility behaviour from PillNext. The badge is rendered inline and visible to screen readers as part of the pill's content.

Help improve this page

Edit on GithubRead the contribution guide