2016-04-02 14:37:21 +03:00
# Chip
Chips represent complex entities in small blocks, such as a contact. Chips can be used for various types of entities, including free form text, predefined text, rules, or contacts. Chips may also contain icons.
<!-- example -->
```jsx
import Chip from 'react-toolbox/lib/chip';
const ChipTest = () => (
< div >
< Chip label = "Example Chip" / >
< Chip label = "Deletable Chip" deletable / >
< Chip
label="Avatar Chip"
avatar={< Avatar style = {{backgroundColor: ' deepskyblue ' } } icon = "folder" / > }
/>
< Chip
label="Initial chip"
avatar={< Avatar title = "A" / > }
deletable
/>
< Chip
label="Image contact chip"
avatar={< Avatar > < img src = "https://placeimg.com/80/80/animals" / > < / Avatar > }
/>
< / div >
);
```
## Properties
2016-04-04 11:27:41 +03:00
| Name | Type | Default | Description|
|:----------------|:------------|:----------------|:-----------|
| `avatar` | `element` | | An `Avatar` component to use in a contact chip. |
| `className` | `String` | `''` | Additional class name to provide custom styling.|
| `deletable` | `Boolean` | `false` | If true, the chip will be rendered with a delete icon.|
| `label` | `String` | `''` | label for the chip. |
| `onDeleteClick` | `Function` | | Callback to be invoked when the delete icon is clicked. |