<section class="section section-tokens" aria-labelledby="chips-heading">
  <h2 id="chips-heading">Chips</h2>

  <h3>Default chips</h3>
  <div class="cluster">
    <span class="chip">Label<button class="chip-remove" aria-label="Remove" type="button"><i class="ph ph-x"></i></button></span>
    <span class="chip chip-primary">Primary<button class="chip-remove" aria-label="Remove" type="button"><i class="ph ph-x"></i></button></span>
    <span class="chip chip-secondary">Secondary<button class="chip-remove" aria-label="Remove" type="button"><i class="ph ph-x"></i></button></span>
    <span class="chip chip-accent">Accent<button class="chip-remove" aria-label="Remove" type="button"><i class="ph ph-x"></i></button></span>
  </div>

  <h3>Selectable chips</h3>
  <div class="cluster">
    <button class="chip" type="button">Option A</button>
    <button class="chip chip-active" type="button">Option B</button>
    <button class="chip" type="button">Option C</button>
  </div>

  <h3>Small chips</h3>
  <div class="cluster">
    <span class="chip chip-sm">Small<button class="chip-remove" aria-label="Remove" type="button"><i class="ph ph-x"></i></button></span>
    <span class="chip chip-sm chip-secondary">Tiny<button class="chip-remove" aria-label="Remove" type="button"><i class="ph ph-x"></i></button></span>
  </div>
</section>