Nectar

Appearance

Tag ​

Tag component is used to categorize content.

Props ​

PropTypeDefaultDescription
sizestringsmSize of the tag. Options: sm, md and lg.

Example component with all props ​

html
<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
html
  <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
html
  <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
html
  <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
html
  <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
html
  <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
html
  <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
html
  <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>