Pill

Pills represent a set of one or multiple objects which can be entered or changed by the user. By default, pills can be removed by the user. When necessary, the order of pills can be changed by the user using drag and drop. They are used to represent complex entities in small blocks such as contact details. Contentful Pills are are used to render transition locales and tag elements.

Table of contents

• How to use Pill
• Code examples
• Content recommendations
• Accessibility

How to use Pill

• 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.

Code examples

Example of usage with draggable option

// import { Pill } from '@contentful/forma-36-react-components';

<Pill
  tabIndex={0}
  testId="pill-item"
  label="test label"
  onClose={() => {}}
  onDrag={() => {}}
/>
// import { Pill } from '@contentful/forma-36-react-components';

<Pill
  tabIndex={0}
  testId="pill-item"
  label="test label"
  onClose={() => {}}
  onDrag={() => {}}
/>
Hide source

Example of the Pill component with dragHandle, in that case Icon.

// import { Pill, Icon } from '@contentful/forma-36-react-components';

<Pill
  label="example.user@contentful.com"
  dragHandleComponent={
    <Icon
      icon="ArrowUp"
      color="positive"
      style={{ padding: '0.375rem 0.625rem' }}
    />
  }
/>
// import { Pill, Icon } from '@contentful/forma-36-react-components';

<Pill
  label="example.user@contentful.com"
  dragHandleComponent={
    <Icon
      icon="ArrowUp"
      color="positive"
      style={{ padding: '0.375rem 0.625rem' }}
    />
  }
/>
Hide source

Content recommendations:

• Be sure the pill text is clear and concise.

Accessibility

• Label value is passed in the component as a aria-label and title in the span element, like follows aria-label={label} title={label}.