<gstock-chip variant="solid">Solid</gstock-chip>
<gstock-chip variant="outlined">Outlined</gstock-chip>
<gstock-chip variant="plain">Plain</gstock-chip>

<gstock-chip color="primary" variant="solid">Primary</gstock-chip>
<gstock-chip color="secondary" variant="solid">Secondary</gstock-chip>
<gstock-chip color="success" variant="solid">Success</gstock-chip>
<gstock-chip color="warning" variant="solid">Warning</gstock-chip>
<gstock-chip color="danger" variant="solid">Danger</gstock-chip>

<br />

<gstock-chip color="primary" variant="outlined">Primary</gstock-chip>
<gstock-chip color="secondary" variant="outlined">Secondary</gstock-chip>
<gstock-chip color="success" variant="outlined">Success</gstock-chip>
<gstock-chip color="warning" variant="outlined">Warning</gstock-chip>
<gstock-chip color="danger" variant="outlined">Danger</gstock-chip>

<br />

<gstock-chip color="primary" variant="plain">Primary</gstock-chip>
<gstock-chip color="secondary" variant="plain">Secondary</gstock-chip>
<gstock-chip color="success" variant="plain">Success</gstock-chip>
<gstock-chip color="warning" variant="plain">Warning</gstock-chip>
<gstock-chip color="danger" variant="plain">Danger</gstock-chip>

<gstock-chip size="small">Small</gstock-chip>
<gstock-chip size="medium">Medium</gstock-chip>
<gstock-chip size="large">Large</gstock-chip>

<gstock-chip size="small" pill>Small</gstock-chip>
<gstock-chip size="medium" pill>Medium</gstock-chip>
<gstock-chip size="large" pill>Large</gstock-chip>

<div class="pill-chips-removable">
  <gstock-chip color="primary" removable>Primary</gstock-chip>
  <gstock-chip color="secondary" removable>Secondary</gstock-chip>
  <gstock-chip color="success" removable>Success</gstock-chip>
  <gstock-chip color="warning" removable>Warning</gstock-chip>
  <gstock-chip color="danger" removable>Danger</gstock-chip>
</div>

<script type="module">
  const container = document.querySelector('.pill-chips-removable');

  container.addEventListener('gstock-remove-event', event => {
    const tag = event.target;
    tag.style.opacity = '0';
    setTimeout(() => {
      tag.style.opacity = '1';
    }, 2000);
  });
</script>

<style>
  .pill-chips-removable gstock-chip {
    transition: 250ms opacity;
  }
</style>