Tag

<template>
  <section>
    <u-tag>Default</u-tag>
  </section>
</template>

<template>
  <section>
    <u-tag pill>Pill</u-tag>
  </section>
</template>

<template>
  <section class="children:mb-2 children:mr-2 -mb-2">
    <u-tag clearable>Clearable</u-tag>
    <u-tag pill clearable>Clearable Pill</u-tag>
  </section>
</template>

<template>
  <section>
    <u-tag>Truncated tag of an unreasonable character length</u-tag>
  </section>
</template>

<template>
  <section class="grid gap-x-4 gap-y-8 grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
    <div>
      <h5 class="font-regular text-base md:text-lg leading-snug">Primary</h5>
      <div>
        <u-tag tone="primary" variant="subtle">Subtle</u-tag>
        <br />
        <u-tag tone="primary" variant="normal">Normal</u-tag>
      </div>
    </div>
    <div>
      <h5 class="font-regular text-base md:text-lg leading-snug">Secondary</h5>
      <div>
        <u-tag tone="secondary" variant="subtle">Subtle</u-tag>
        <br />
        <u-tag tone="secondary" variant="normal">Normal</u-tag>
      </div>
    </div>
    <div>
      <h5 class="font-regular text-base md:text-lg leading-snug">Tertiary</h5>
      <div>
        <u-tag tone="tertiary" variant="subtle">Subtle</u-tag>
        <br />
        <u-tag tone="tertiary" variant="normal">Normal</u-tag>
      </div>
    </div>
    <div>
      <h5 class="font-regular text-base md:text-lg leading-snug">Quaternary</h5>
      <div>
        <u-tag tone="quaternary" variant="subtle">Subtle</u-tag>
        <br />
        <u-tag tone="quaternary" variant="normal">Normal</u-tag>
      </div>
    </div>
    <div>
      <h5 class="font-regular text-base md:text-lg leading-snug">Neutral</h5>
      <div>
        <u-tag tone="neutral" variant="subtle">Subtle</u-tag>
        <br />
        <u-tag tone="neutral" variant="normal">Normal</u-tag>
      </div>
    </div>
    <div>
      <h5 class="font-regular text-base md:text-lg leading-snug">Info</h5>
      <div>
        <u-tag tone="info" variant="subtle">Subtle</u-tag>
        <br />
        <u-tag tone="info" variant="normal">Normal</u-tag>
      </div>
    </div>
    <div>
      <h5 class="font-regular text-base md:text-lg leading-snug">Positive</h5>
      <div>
        <u-tag tone="positive" variant="subtle">Subtle</u-tag>
        <br />
        <u-tag tone="positive" variant="normal">Normal</u-tag>
      </div>
    </div>
    <div>
      <h5 class="font-regular text-base md:text-lg leading-snug">Warning</h5>
      <div>
        <u-tag tone="warning" variant="subtle">Subtle</u-tag>
        <br />
        <u-tag tone="warning" variant="normal">Normal</u-tag>
      </div>
    </div>
    <div>
      <h5 class="font-regular text-base md:text-lg leading-snug">Critical</h5>
      <div>
        <u-tag tone="critical" variant="subtle">Subtle</u-tag>
        <br />
        <u-tag tone="critical" variant="normal">Normal</u-tag>
      </div>
    </div>
  </section>
</template>