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
Example of the Pill component with dragHandle, in that case Icon.
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 anaria-label
, as shown on the example
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 | |
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 |