> 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.2.1/api-reference/uicomponents/uichip.md).

# UIChip

An chip component for presents selection and choices

### Properties

| Name             | Type                             | Default     | Description                                                                                                                  |
| ---------------- | -------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------- |
| thumbnail        | `VirtualHTMLElement` \| `string` |             | Thumbnail present with the chip                                                                                              |
| 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.2.1/api-reference/uicomponents/uichip.md#available-types) for variations |
| onRemoveBtnClick | `function`                       |             | **Required** - Callback function when clicking remove button                                                                 |

### Example

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

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

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

## Available types

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

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