Chips are compact elements that represent an input, attribute, or action. All chips now share a boxier
shape with rounded corners, updated color mappings, and dynamic color compatibility.
Ex:- E-commerce Websites, Social Media Websites, Coding Platforms,etc.
Plain Chips Action Chips Image Chips Outline Chips
John
Anna
Rock
Annabelle
<div id="plain-chips" class="chip-container">
<div class="chips-btn">
<span>Home</span>
</div>
<div class="chips-btn">
<span>Contacts</span>
</div>
<div class="chips-btn">
<span>Call</span>
</div>
<div class="chips-btn">
<span>Help</span>
</div>
</div>
<div id="action-chips" class="chip-container">
<div class="chips-btn">
<span><i class="fa-solid
fa-house"></i> Home</span><i class="fa-solid fa-xmark
close-chip"></i>
</div>
<div class="chips-btn">
<span><i class="fa-solid
fa-id-badge"></i> Contacts</span><i class="fa-solid fa-xmark
close-chip"></i>
</div>
<div class="chips-btn">
<span><i class="fa-solid
fa-phone"></i> Call</span><i
class="fa-solid fa-xmark close-chip"></i>
</div>
<div class="chips-btn">
<span><i class="fa-solid
fa-circle-question"></i> Help</span><i
class="fa-solid fa-xmark close-chip"></i>
</div>
</div>
<div id="image-chips" class="chip-container">
<div class="chips-btn">
<img src="https://color-components.netlify.app/avatar-1.jpg" alt="John"
class="img-chip"> <span></span>John</span><i
class="fa-solid fa-xmark close-chip"></i>
</div>
<div class="chips-btn">
<img src="https://color-components.netlify.app/avatar-2.jpg" alt="Anna"
class="img-chip"><span>Anna</span><i
class="fa-solid fa-xmark close-chip"></i>
</div>
<div class="chips-btn">
<img src="https://color-components.netlify.app/avatar-3.jpg" alt="Rock"
class="img-chip"><span>Rock</span><i
class="fa-solid fa-xmark close-chip"></i>
</div>
<div class="chips-btn">
<img src="https://color-components.netlify.app/avatar-4.jpg" alt="Annabelle"
class="img-chip">
<span>Annabelle</span><i
class="fa-solid fa-xmark close-chip"></i>
</div>
</div>
<div id="outline-chips" class="chip-container">
<div class="chips-btn primary-chip">
<span>Primary</span><i class="fa-solid fa-xmark close-chip"></i>
</div>
<div class="chips-btn secondary-chip">
<span>Secondary</span><i class="fa-solid fa-xmark close-chip"></i>
</div>
<div class="chips-btn success-chip">
<span>Success</span><i class="fa-solid fa-xmark close-chip"></i>
</div>
<div class="chips-btn warning-chip">
<span>Warning</span><i class="fa-solid fa-xmark close-chip"></i>
</div>
<div class="chips-btn info-chip">
<span>Info</span><i class="fa-solid fa-xmark close-chip"></i>
</div>
</div>