Filter Chips

<div class="nuda-fchips">
  <button class="nuda-fchips__chip is-active">All</button>
  <button class="nuda-fchips__chip">Loaders</button>
  <button class="nuda-fchips__chip">Buttons</button>
  <button class="nuda-fchips__chip">Hero</button>
</div>

document.querySelectorAll('.nuda-fchips__chip').forEach(chip => {
  chip.addEventListener('click', () => {
    document
      .querySelectorAll('.nuda-fchips__chip')
      .forEach(c => c.classList.remove('is-active'));
    chip.classList.add('is-active');
  });
});

.nuda-fchips {
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 99px;
  flex-wrap: wrap;
}

.nuda-fchips__chip {
  padding: 5px 12px;
  background: transparent;
  border: 0;
  color: #a0a0a8;
  font-size: 11px;
  font-weight: 500;
  border-radius: 99px;
  cursor: pointer;
  transition: background .25s,color .25s,transform .15s;
}

.nuda-fchips__chip:hover {
  background: rgba(255,255,255,.04);
  color: #fafafa;
}

.nuda-fchips__chip.is-active {
  background: #e4ff54;
  color: #09090b;
  font-weight: 600;
  animation: _chipPick .35s cubic-bezier(.16,1,.3,1);
}

@keyframes _chipPick {
  0% {
    transform: scale(.85);
  }
  60% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-fchips__chip.is-active {
    animation: none;
  }
}