Government of
India
Powered by NeGD | MeitY Government of India® UX4G
Overview #
Chips can be used to represent small blocks of information. They are most commonly used either for contacts or for tags.
<div class="d-flex gap-3 align-items-center">
<span class="chip chip-outline btn-outline-primary"> <i class="fa fa-check-circle chip-icon-left d-none"></i> <span class="mx-1">Label</span> </span>
<span class="chip chip-outline btn-outline-primary">
<span class="mx-1">Label</span>
<i class="fa fa-caret-down"></i>
</span>
<span class="chip chip-outline btn-outline-primary d-flex align-items-center gap-1">
<div class="rounded-circle avatars avatars-sm d-flex align-items-center justify-content-center position-relative" style="width: 24px; height: 24px;">
<img class="rounded-circle" src="https://img.freepik.com/premium-photo/beautiful-asian-student-girl-with-smiling-face-ai-generated_836063-589.jpg?w=360" alt="Avatars" />
</div>
<span class="mx-1">Label</span>
<i class="fa fa-caret-down"></i>
</span>
<span class="chip chip-outline btn-outline-primary">
<i class="fa fa-user-circle"></i>
<span class="mx-1">Label</span>
<i class="fa fa-caret-down"></i>
</span>
</div>
RESULT
Label
Label
Label
Label
For enable and disabled icon need to add some js
document.querySelectorAll('.chip').forEach(chip => {
chip.addEventListener('click', () => {
const icon = chip.querySelector('.chip-icon-left');
if (icon) {
icon.classList.toggle('d-none');
}
chip.classList.toggle('active');
});
});
