# 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.

To add an icon or contact image to a chip, include an `Avatar` element as the first child.

<!-- example -->
```jsx
import Avatar from 'react-toolbox/lib/avatar';
import Chip from 'react-toolbox/lib/chip';

const ChipTest = () => (
  <div>
    <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>

    <Chip avatar>
      <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
      <span>Avatar Chip</span>
    </Chip>

    <Chip avatar>
      <Avatar title="A" /><span>Initial chip</span>
    </Chip>

    <Chip avatar>
      <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
      <span>Image contact chip</span>
    </Chip>
  </div>
);
```

## Properties

| Name            | Type        | Default         | Description|
|:----------------|:------------|:----------------|:-----------|
| `avatar`        | `Boolean`   | `false`         | If true, the chip will include styles to accommodate an `Avatar`. |
| `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. |