STYLED MDL

Chips

Represents complex entities in small blocks.

Basic Chips

Basic Chip
Basic Chip
/*--- Basic Chip ---*/
<Chip>Basic Chip</Chip>

/*--- Deletable Chip ---*/
<Chip deletable onClickDelete={() => alert('You clicked delete!')}>
  Basic Chip
</Chip>

/*--- Button Chip ---*/
<ButtonChip>Button Chip</ButtonChip>

Contact Chips

AContact Chip
Deletable Contact Chip
/*--- Contact Chip ---*/
<Chip contact={{ color: 'teal|600', textColor: 'white', text: 'A' }}>
  Contact Chip
</Chip>

/*--- Deletable Contact Chip ---*/
<Chip deletable contact={{ src: avatarImg }}>
  Deletable Contact Chip
</Chip>

Usage

<Chip>

PropTypeDefaultDescription
deletablebooleanfalseAdds a button to delete the chip
onClickDeletecallbackundefinedCalled with the click event when a user clicks the delete button
contactobjectundefinedProvide an object with a src key to use an image or svg, otherwise set the color, textColor and text keys.

<ButtonChip>

PropTypeDefaultDescription
contactobjectundefinedProvide an object with a src key to use an image or svg, otherwise set the color, textColor and text keys.