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
      label="example.user@contentful.com"
      onDrag={() => {}}
      dragHandleComponent={
        <DragIcon aria-label="Drag handler" variant="primary" />
      }
    />
  );
}
function DragHandleComponentPillExample() {
  return (
    <Pill
      label="example.user@contentful.com"
      onDrag={() => {}}
      dragHandleComponent={
        <DragIcon aria-label="Drag handler" variant="primary" />
      }
    />
  );
}
Open in Playground

Integration example with react-sortable-hoc

This is an example of integrating Pill components with a library for drag-and-drop sorting. In this example, react-sortable-hoc is used.

Hide code
function IntegrationPillExample() {
  const [items, updateItems] = React.useState([
    'Tech',
    'News',
    'CMS',
    'Contentful',
  ]);

  const removeItem = React.useCallback(
    (index) => {
      const newItems = items.filter((_, filterIndex) => index !== filterIndex);
      updateItems(newItems);
    },
    [items],
  );

  const swapItems = React.useCallback(
    ({ oldIndex, newIndex }) => {
      //  `arrayMove` is imported from 'array-move'
      const newItems = arrayMove(items, oldIndex, newIndex);
      updateItems(newItems);
    },
    [items],
  );

  // `SortableContainer`, `SortableElement` and `SortableHandle` are imported  from 'react-sortable-hoc'

  const SortablePillHandle = SortableHandle(() => (
    <Box marginTop="spacingXs">
      <DragIcon variant="muted" />
    </Box>
  ));

  const SortablePill = SortableElement(({ label, onRemove }) => (
    <Box marginRight="spacingS">
      <Pill
        label={label}
        onClose={() => {
          onRemove();
        }}
        onDrag={() => {}}
        dragHandleComponent={<SortablePillHandle />}
      />
    </Box>
  ));

  const SortableList = SortableContainer((props) => (
    <Flex>{props.children}</Flex>
  ));

  return (
    <SortableList
      useDragHandle
      axis="xy"
      distance={10}
      onSortEnd={({ oldIndex, newIndex }) => {
        swapItems({ oldIndex, newIndex });
      }}
    >
      {items.map((item, index) => (
        <SortablePill
          key={item}
          index={index}
          label={item}
          onRemove={() => removeItem(index)}
        />
      ))}
    </SortableList>
  );
}
function IntegrationPillExample() {
  const [items, updateItems] = React.useState([
    'Tech',
    'News',
    'CMS',
    'Contentful',
  ]);

  const removeItem = React.useCallback(
    (index) => {
      const newItems = items.filter((_, filterIndex) => index !== filterIndex);
      updateItems(newItems);
    },
    [items],
  );

  const swapItems = React.useCallback(
    ({ oldIndex, newIndex }) => {
      //  `arrayMove` is imported from 'array-move'
      const newItems = arrayMove(items, oldIndex, newIndex);
      updateItems(newItems);
    },
    [items],
  );

  // `SortableContainer`, `SortableElement` and `SortableHandle` are imported  from 'react-sortable-hoc'

  const SortablePillHandle = SortableHandle(() => (
    <Box marginTop="spacingXs">
      <DragIcon variant="muted" />
    </Box>
  ));

  const SortablePill = SortableElement(({ label, onRemove }) => (
    <Box marginRight="spacingS">
      <Pill
        label={label}
        onClose={() => {
          onRemove();
        }}
        onDrag={() => {}}
        dragHandleComponent={<SortablePillHandle />}
      />
    </Box>
  ));

  const SortableList = SortableContainer((props) => (
    <Flex>{props.children}</Flex>
  ));

  return (
    <SortableList
      useDragHandle
      axis="xy"
      distance={10}
      onSortEnd={({ oldIndex, newIndex }) => {
        swapItems({ oldIndex, newIndex });
      }}
    >
      {items.map((item, index) => (
        <SortablePill
          key={item}
          index={index}
          label={item}
          onRemove={() => removeItem(index)}
        />
      ))}
    </SortableList>
  );
}
Open in Playground

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