Forma 36: Pill component

Usage no npm install needed!

<script type="module">
  import contentfulF36Pill from 'https://cdn.skypack.dev/@contentful/f36-pill';


title: 'Pill' type: 'component' status: 'stable' slug: /components/pill/ github: 'https://github.com/contentful/forma-36/tree/master/packages/components/pill' storybook: 'https://v4-f36-storybook.netlify.app/?path=/story/components-pill--basic' typescript: ./src/Pill.tsx

Pill component allows to represent a set of one or multiple objects which can be entered or changed by the user. For example, tags. Pill can be integrated with a drag-and-drop solution.


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


Using with draggable and close option

Using the Pill component with custom dragHandleComponent

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.

Props (API reference)

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.


  • 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