Pill

Import

import { Pill } from '@contentful/f36-components';
// or
import { Pill } from '@contentful/f36-pill';

Examples

Using with draggable and close option

Hide code
function DraggableAndClosePillExample() {
  return (
    <Pill
      testId="pill-item"
      label="test label"
      onClose={() => {}}
      onDrag={() => {}}
    />
  );
}
function DraggableAndClosePillExample() {
  return (
    <Pill
      testId="pill-item"
      label="test label"
      onClose={() => {}}
      onDrag={() => {}}
    />
  );
}
Open in Playground

Using the Pill component with custom dragHandleComponent

Hide code
function DragHandleComponentPillExample() {
  return (
    <Pill
      isDraggable
      label="example.user@contentful.com"
      dragHandleComponent={
        <DragIcon aria-label="Drag handler" variant="primary" />
      }
    />
  );
}
function DragHandleComponentPillExample() {
  return (
    <Pill
      isDraggable
      label="example.user@contentful.com"
      dragHandleComponent={
        <DragIcon aria-label="Drag handler" variant="primary" />
      }
    />
  );
}
Open in Playground

Integration with drag and drop libraries

See the Dnd kit integration page for examples using the pill component with drag and drop.

Content guidelines

• Be sure the pill text is clear and concise
• Use Pill to represent data like contact details or tagging
• It can be used for web content that needs to be labeled, categorized, or organized using keywords that describe them.

Accessibility

• Label value is passed in the component as a title in the span element, like follows title={label}.
• The default drag component has a aria-label="Drag handler", custom drag handle components should also include an aria-label, as shown on the example