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
<!-- 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>
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 | Description |
---|---|
onClick | Event will be triggered on Chip click |
onDelete | Event will be triggered on Chip delete link click |