Basic Usage
To render a basic Pill component, pass a string as the `value` prop:
Basic Implementation:
Simple Content
Removable Pill
With Icon
Custom Component
You can also use a custom component for the content of the Pill. In this example, we will create a custom Status component, which takes a status string and shows color and text for the status.
Custom Component Implementation:
Set the using property to the Status component and Pill will use this for the content.
Removable Pills
To create a removable Pill, set the `removable` prop to `true`. This will add a remove icon to the Pill, and when clicked, it will emit a `remove` event that you can handle to perform the actual remove action:
Removable Implementation:
The Pill component provides a flexible and customizable way to display removable elements in your application. By utilizing the Item component's features, you can create various appearances to suit your specific use cases.
Properties
Core Properties
- value: String or object with content data (required)
- fields: Field mapping object for custom data structures
- removable: Boolean to enable remove functionality
- class: Custom CSS classes
Events
- remove: Fired when remove button is clicked
Use Cases
Perfect for tags, selected filters, user selections, or any scenario where you need removable visual elements with rich content display capabilities.