react-toolbox/components/chip/readme.md

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.

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

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.