Chip Group Toggle

<div class="nuda-chip-toggle">
  <div class="nuda-chip-toggle__head">
    <span class="nuda-chip-toggle__title">Categories</span>
    <button type="button" class="nuda-chip-toggle__action" data-action="all">Select all</button>
    <button type="button" class="nuda-chip-toggle__action" data-action="clear">Clear</button>
  </div>
  <div class="nuda-chip-toggle__row">
    <button type="button" class="nuda-chip-toggle__chip nuda-chip-toggle__chip--on" aria-pressed="true">Design</button>
    <button type="button" class="nuda-chip-toggle__chip" aria-pressed="false">Marketing</button>
    <button type="button" class="nuda-chip-toggle__chip" aria-pressed="false">Support</button>
  </div>
</div>

<script>
  const chips = document.querySelectorAll(".nuda-chip-toggle__chip");
  document.querySelector('[data-action="all"]').onclick = () =>
    chips.forEach((c) => { c.classList.add("nuda-chip-toggle__chip--on"); c.setAttribute("aria-pressed", "true"); });
  document.querySelector('[data-action="clear"]').onclick = () =>
    chips.forEach((c) => { c.classList.remove("nuda-chip-toggle__chip--on"); c.setAttribute("aria-pressed", "false"); });
</script>

/* Chip Group Toggle
   Multi-select chips with "select all" / "clear" controls.
   Customize: --toggle-on-bg, --toggle-on-fg */

.nuda-chip-toggle {
  --toggle-on-bg: #e4ff54;
  --toggle-on-fg: #09090b;
  width: 100%;
  font: 500 12px/1 ui-sans-serif, system-ui, sans-serif;
  color: #fafafa;
}

.nuda-chip-toggle__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.nuda-chip-toggle__title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #63636e;
  margin-right: auto;
}

.nuda-chip-toggle__action {
  padding: 3px 8px;
  font: 600 10px/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: color 0.2s, border-color 0.2s;
}

.nuda-chip-toggle__action:hover {
  color: var(--toggle-on-bg);
  border-color: rgba(228, 255, 84, 0.4);
}

.nuda-chip-toggle__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.nuda-chip-toggle__chip {
  padding: 5px 12px;
  color: #a0a0a8;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.nuda-chip-toggle__chip:hover {
  color: #fafafa;
  border-color: rgba(255, 255, 255, 0.2);
}

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