> For the complete documentation index, see [llms.txt](https://docs.navigaglobal.com/writer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.navigaglobal.com/writer/6.4.1/api-reference/uicomponents/uichip.md).

# UIChip

An chip component for presents selection and choices

### Properties

| Name             | Type                 | Default     | Description                                                                                                                  |
| ---------------- | -------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------- |
| value            | `string`             |             | **Required** - Value presented in chip                                                                                       |
| size             | `string`             | `"default"` | Variations default\|small\|micro                                                                                             |
| type             | `string`             | `"default"` | Style for the chip. See [Available types](/writer/6.4.1/api-reference/uicomponents/uichip.md#available-types) for variations |
| avatarComponent  | `VirtualHTMLElement` |             | UIAvatar component or other VirtualElement                                                                                   |
| thumbnail        | `VirtualHTMLElement` |             | Deprecated. Use props `avatarComponent` instead                                                                              |
| avatarUrl        | `string`             |             | Url to avatar                                                                                                                |
| icon             | `string`             |             | FontAwesome 4 icon. Example `fa-user`                                                                                        |
| onRemoveBtnClick | `function`           |             | **Required** - Callback function when clicking remove button                                                                 |
| onSelectChange   | `function`           |             | Callback if we want to have select state                                                                                     |

### Example

```javascript
import {UIChip} from 'writer'

render($$) {
    const el = $$('div')

    return el.append(
        $$(UIChip, {
            value: 'Author name',
            avatarUrl: 'https://image.png',
            onRemoveBtnClick: () => {}
        })
    )
}
```

## Available types

The `UIChip.props.type` has following variations:

| Name     |
| -------- |
| default  |
| primary  |
| draft    |
| alert    |
| pending  |
| warning  |
| done     |
| schedule |
| brand    |