# Pill

Individual Pill component that renders a formatted value with icon and styling

## Installation

```tsx
import { Pill } from 'uxp/components';
```

## Signature

```tsx
const Pill: React.FunctionComponent<PillComponentProps>
```

## Properties

| Name               | Type                                                                                            | Mandatory | Default Value | Example Value |
| ------------------ | ----------------------------------------------------------------------------------------------- | --------- | ------------- | ------------- |
| value              | string                                                                                          | Yes       | -             | -             |
| allFields          | [PillOption\[\]](https://help.iviva.com/uxp/v5/additional-resources/types/pilloption)           | Yes       | -             | -             |
| expressionMatcher  | RegExp                                                                                          | Yes       | -             | -             |
| pillConfiguration  | [PillConfiguration](https://help.iviva.com/uxp/v5/additional-resources/types/pillconfiguration) | No        | -             | -             |
| draggable          | boolean                                                                                         | No        | -             | -             |
| className          | string                                                                                          | No        | -             | -             |
| onClick            | () => void                                                                                      | No        | -             | -             |
| pillValuesSplitFn  | (value: string) => string\[]                                                                    | No        | -             | -             |
| typeIndex          | number                                                                                          | No        | -             | -             |
| showFomatters      | boolean                                                                                         | No        | -             | -             |
| onChangeFormatters | (value: string) => void                                                                         | No        | -             | -             |
| onClickFormatters  | () => void                                                                                      | No        | -             | -             |

## Related Types

* [PillComponentProps](https://help.iviva.com/uxp/v5/additional-resources/types/pillcomponentprops)
* [PillOption](https://help.iviva.com/uxp/v5/additional-resources/types/pilloption)
* [PillConfiguration](https://help.iviva.com/uxp/v5/additional-resources/types/pillconfiguration)
* [PillTypeConfig](https://help.iviva.com/uxp/v5/additional-resources/types/pilltypeconfig)