Chip Group

<div class="nuda-chip-group" role="group">
  <button class="nuda-chip-group__chip" type="button">React</button>
  <button class="nuda-chip-group__chip nuda-chip-group__chip--on"
          type="button" aria-pressed="true">
    <svg viewBox="0 0 12 12" width="12" height="12" aria-hidden="true">
      <path d="M2 6l3 3 5-6" fill="none" stroke="currentColor"
            stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    Vue
  </button>
  <button class="nuda-chip-group__chip" type="button">Svelte</button>
</div>

<script>
  document.querySelectorAll(".nuda-chip-group__chip").forEach((b) => {
    b.addEventListener("click", () => {
      b.classList.toggle("nuda-chip-group__chip--on");
      b.setAttribute("aria-pressed", b.classList.contains("nuda-chip-group__chip--on"));
    });
  });
</script>

/* Chip Group
   Multi-select chips with a checkmark when on.
   Customize: --chip-on-bg, --chip-on-fg */

.nuda-chip-group {
  --chip-on-bg: #e4ff54;
  --chip-on-fg: #09090b;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.nuda-chip-group__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font: 500 12px/1 ui-sans-serif, system-ui, sans-serif;
  color: #a0a0a8;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  cursor: pointer;
  transition: transform 0.15s, color 0.2s, background 0.2s, border-color 0.2s;
}

.nuda-chip-group__chip:hover {
  color: #fafafa;
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.nuda-chip-group__chip--on,
.nuda-chip-group__chip--on:hover {
  color: var(--chip-on-fg);
  background: var(--chip-on-bg);
  border-color: var(--chip-on-bg);
}

@media (prefers-reduced-motion: reduce) {
  .nuda-chip-group__chip { transition: none; }
  .nuda-chip-group__chip:hover { transform: none; }
}