Tag

Tag component is used to categorize content.

Props

Prop	Type	Default	Description
size	string	sm	Size of the tag. Options: sm, md and lg.

Example component with all props

<Tag size="md">Label</Tag>

Tag with Close (X) Icon

The example below demonstrates how to add a close (X) icon to the Tag component. This is commonly used for removable tags. You can place any icon or interactive element inside the Tag as a child element.

Label

  <Tag>
    Label
    <span class="cursor-pointer">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
        <path d="M9.375 2.625L2.625 9.375" stroke="#9F9FA9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M9.375 9.375L2.625 2.625" stroke="#9F9FA9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </span>
  </Tag>

Tag with Counter or Badge

You can also add a counter, badge, or any custom content inside the Tag component. This is useful for showing counts, notifications, or additional information alongside the tag label.

Label 5

  <Tag>
    Label
    <span class="flex flex-col items-center justify-center bg-zinc-100 px-1 text-center font-inter text-xs font-medium leading-5 text-zinc-700">
      5
    </span>
  </Tag>

Tag with Checkbox

You can place interactive elements such as checkboxes inside the Tag component. This is useful for scenarios where you want to allow selection or toggling of tags.

Label

  <Tag>
    <Checkbox v-model="selected" value="option1" />
    Label
  </Tag>

Tag with Checkbox and Close (X) Icon

This example demonstrates a Tag component that combines a checkbox (for selection), a label, and a close (X) icon.
Such a pattern is useful for interactive tag lists where users can select/deselect tags and optionally remove them.

Label

  <Tag>
    <Checkbox v-model="selectedcheck" value="option1" />
    Label
    <span class="cursor-pointer">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
        <path d="M9.375 2.625L2.625 9.375" stroke="#9F9FA9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M9.375 9.375L2.625 2.625" stroke="#9F9FA9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </span>
  </Tag>

Sizes

sm

The sm size is the default size and is used for most tags. Setting this property is not required.

Label

  <Tag size="sm">
    <Checkbox v-model="selected" value="option1" />
    Label
    <span class="cursor-pointer">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
        <path d="M9.375 2.625L2.625 9.375" stroke="#9F9FA9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M9.375 9.375L2.625 2.625" stroke="#9F9FA9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </span>
  </Tag>

md

Label

  <Tag size="md">
    <Checkbox v-model="selectedMd" value="option1" />
    Label
    <span class="cursor-pointer">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
        <path d="M9.375 2.625L2.625 9.375" stroke="#9F9FA9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M9.375 9.375L2.625 2.625" stroke="#9F9FA9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </span>
  </Tag>

lg

Label

  <Tag size="lg">
    <Checkbox v-model="selectedLg" value="option1" />
    Label
    <span class="cursor-pointer">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
        <path d="M9.375 2.625L2.625 9.375" stroke="#9F9FA9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M9.375 9.375L2.625 2.625" stroke="#9F9FA9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </span>
  </Tag>