Language: ENCN

Chips React Component

Chips (Tags) React component represent complex entities in small blocks, such as a contact. They can contain a photo, short title string, and brief information

Usage example

<!-- Simple Chip -->
<Chip text="Example Chip"></Chip>
<!-- Colored Chip -->
<Chip text="Another Chip" bg="red" color="white"></Chip>
<!-- Media Chip -->
<Chip text="Jane Doe" media='<img src="http://lorempixel.com/100/100/people/9/">'></Chip>
<!-- Deleteable Chip -->
<Chip text="Another Chip" deleteable onDelete={onChipDelete}></Chip>
<!-- Deleteable Media Chip -->
<Chip text="Jane Doe" media='<img src="http://lorempixel.com/100/100/people/9/">' media-bg="red" deleteable onDelete={onChipDelete}></Chip>

Renders to:

<!-- Simple Chip -->
<span class="chip">
  <span class="chip-label">Example Chip</span>
</span>
<!-- Colored Chip -->
<span class="chip bg-red color-white">
  <span class="chip-label">Another Chip</span>
</span>
<!-- Media Chip -->
<span class="chip bg-red color-white">
  <span class="chip-media">
    <img src="http://lorempixel.com/100/100/people/9/">
  </span>
  <span class="chip-label">Jane Doe</span>
</span>
<!-- Deleteable Chip -->
<span class="chip bg-red color-white">
  <span class="chip-label">Another Chip</span>
  <a href="#" class="chip-delete"></a>
</span>
<!-- Deleteable Media Chip -->
<span class="chip">
  <span class="chip-media bg-red">
    <img src="http://lorempixel.com/100/100/people/9/">
  </span>
  <span class="chip-label">Jane Doe</span>
  <a href="#" class="chip-delete"></a>
</span>

Properties

Prop Type Default Description
color string Chip text color. One of default colors
bg string Chip background color. One of default colors
text string Chip label text
media string Content of chip media
mediaBg string Chip media element background color. One of default colors
mediaColor string Chip media element text color. One of default colors
deleteable boolean Defines whether the Chip has additional "delete" link or not

Event Properties

Event Description
onClick Event will be triggered on Chip click
onDelete Event will be triggered on Chip delete link click