PillNext

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>
  );
}

Removable

function PillNextRemovableExample() {
  return (
    <Stack flexDirection="row">
      <PillNext label="Removable" onRemove={() => {}} />
      <PillNext label="Disabled remove" onRemove={() => {}} isDisabled />
    </Stack>
  );
}

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>
  );
}

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.
• Labels that overflow truncate with an ellipsis; a tooltip showing the full label appears on hover/focus.