Pill

<div class="flex flex-wrap gap-2">
  <div class="pill">
    <span class="pill__label">Particulier</span>
  </div>
  <div class="pill">
    <span class="pill__label">Zakelijk</span>
  </div>
  <div class="pill">
    <span class="pill__label">Expert</span>
  </div>
  <div class="pill">
    <span class="pill__label">Expert met een hele lange naam die niemand wil lezen</span>
  </div>
</div>

<div class="flex flex-wrap gap-2">
  <a href="javascript: console.log('clicked link');" class="pill">
    <span class="pill__label">Toon alles</span>
  </a>
  <a href="javascript: console.log('clicked link');" class="pill">
    <span class="pill__label">Particulier</span>
  </a>
  <a href="javascript: console.log('clicked link');" class="pill">
    <span class="pill__label">Zakelijk</span>
  </a>
  <a href="javascript: console.log('clicked link');" class="pill">
    <span class="pill__label">Expert</span>
  </a>
</div>

<div class="flex flex-wrap gap-2">
  <div class="option--pill">
    <input type="radio" value="1" name="radio-group" id="all-items" />
    <label class="pill" for="all-items">
      <span class="pill__label">Toon alles</span>
    </label>
  </div>
  <div class="option--pill">
    <input type="radio" value="2" name="radio-group" id="private-items" checked="checked" />
    <label class="pill" for="private-items">
      <span class="pill__label">Particulier</span>
    </label>
  </div>
  <div class="option--pill">
    <input type="radio" value="3" name="radio-group" id="corporate-items" />
    <label class="pill" for="corporate-items">
      <span class="pill__label">Zakelijk</span>
    </label>
  </div>
  <div class="option--pill">
    <input type="radio" value="4" name="radio-group" id="expert-items" />
    <label class="pill" for="expert-items">
      <span class="pill__label">Expert</span>
    </label>
  </div>
</div>

<div class="flex flex-wrap gap-2">
  <div class="option--pill">
    <input type="checkbox" value="1" name="checkbox-group" id="all-items" checked="checked" />
    <label class="pill" for="all-items">
      <span class="pill__label">Toon alles</span>
    </label>
  </div>
  <div class="option--pill">
    <input type="checkbox" value="2" name="checkbox-group" id="private-items" />
    <label class="pill" for="private-items">
      <span class="pill__label">Particulier</span>
    </label>
  </div>
  <div class="option--pill">
    <input type="checkbox" value="3" name="checkbox-group" id="corporate-items" checked="checked" />
    <label class="pill" for="corporate-items">
      <span class="pill__label">Zakelijk</span>
    </label>
  </div>
  <div class="option--pill">
    <input type="checkbox" value="4" name="checkbox-group" id="expert-items" />
    <label class="pill" for="expert-items">
      <span class="pill__label">Expert</span>
    </label>
  </div>
</div>