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.

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 and close option

// 

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

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

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

// 
// 

<Pill
  label="example.user@contentful.com"
  onDrag={() => {}}
  dragHandleComponent={
    <InfoCircleIcon
      aria-label="Drag handler"
      variant="muted"
      style={{ padding: '0.375rem 0.625rem' }}
    />
  }
/>
// 
// 

<Pill
  label="example.user@contentful.com"
  onDrag={() => {}}
  dragHandleComponent={
    <InfoCircleIcon
      aria-label="Drag handler"
      variant="muted"
      style={{ padding: '0.375rem 0.625rem' }}
    />
  }
/>
Hide source

Content guidelines

• Be sure the pill text is clear and concise.

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

Props

• Name

  label(required)

  Description

  Text that will be shown on the pill

  string
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  dragHandleComponent

  Description

  Custom component to be used as handler for the drag functionality.

  string

  number

  false

  true

  {}

  ReactElement<any, string | JSXElementConstructor<any>>

  ReactNodeArray

  ReactPortal
• Name

  onClose

  Description

  Function that handles when the close icon is clicked. Close icon visibility depends on if this property is set.

  () => void
• Name

  onDrag

  Description

  Function that handles when the pill is dragged. Drag icon visibility depends on if this property is set.

  () => void
• Name

  testId

  Description

  A [data-test-id] attribute used for testing purposes

  string
• Name

  variant

  Description

  Determines style variation of Pill component

  "idle"

  "active"

  "deleted"