Pill

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

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

Examples

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)

Open in Storybook

Name

Type

Default

label
required
string

Text that will be shown on the pill

className
string

CSS class to be appended to the root element

css
string
number
false
true
ComponentSelector
Keyframes
SerializedStyles
ArrayInterpolation<undefined>
ObjectInterpolation<undefined>
(theme: any) => Interpolation<undefined>

dragHandleComponent
string
number
false
true
{}
ReactElement<any, string | JSXElementConstructor<any>>
ReactNodeArray
ReactPortal

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

onClose
() => void

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

onDrag
() => void

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

testId
string

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

variant
"idle"
"active"
"deleted"

Determines style variation of Pill component

idle

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