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.
2016-04-04 12:24:30 +03:00
To add an icon or contact image to a chip, include an `Avatar` element as the first child.
2016-04-02 14:37:21 +03:00
<!-- example -->
```jsx
2016-04-04 12:24:30 +03:00
import Avatar from 'react-toolbox/lib/avatar';
2016-04-02 14:37:21 +03:00
import Chip from 'react-toolbox/lib/chip';
const ChipTest = () => (
< div >
2016-04-04 12:24:30 +03:00
< Chip > Example chip< / Chip >
< Chip >
< span style = {{textDecoration: ' line-through ' } } > Standard< / span >
< strong > Custom< / strong > chip < small > (custom markup)< / small >
< / Chip >
< Chip deletable > Deletable Chip< / Chip >
2016-04-04 12:34:48 +03:00
< Chip >
2016-04-04 12:24:30 +03:00
< Avatar style = {{backgroundColor: ' deepskyblue ' } } icon = "folder" / >
< span > Avatar Chip< / span >
< / Chip >
2016-04-04 12:34:48 +03:00
< Chip >
2016-04-04 12:24:30 +03:00
< Avatar title = "A" / > < span > Initial chip< / span >
< / Chip >
2016-04-04 12:34:48 +03:00
< Chip >
2016-04-04 12:24:30 +03:00
< Avatar > < img src = "https://placeimg.com/80/80/animals" / > < / Avatar >
< span > Image contact chip< / span >
< / Chip >
2016-04-02 14:37:21 +03:00
< / div >
);
```
## Properties
2016-04-04 11:27:41 +03:00
| Name | Type | Default | Description|
|:----------------|:------------|:----------------|:-----------|
2016-04-04 12:34:48 +03:00
| `children` | `Node` | | Child components, usually `Avatar` and inline elements. |
2016-04-04 11:27:41 +03:00
| `className` | `String` | `''` | Additional class name to provide custom styling.|
| `deletable` | `Boolean` | `false` | If true, the chip will be rendered with a delete icon.|
| `onDeleteClick` | `Function` | | Callback to be invoked when the delete icon is clicked. |