# 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](#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    |
