Pill

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