feat: add Tag component from design system and rename SquareChip (#10650)

## Summary
- Add `Tag` component based on Figma design system with CVA variants
  - `square` (rounded-sm) and `rounded` (pill) shapes
- `overlay` shape for tags on image thumbnails (pending Figma
confirmation)
  - `default`, `unselected`, `selected` states matching Figma
  - `removable` prop with X close button and `remove` event
  - Icon slot support
- Rename `SquareChip` → `Tag` across all consumers
(WorkflowTemplateSelectorDialog, SampleModelSelector)
- Update all Storybook stories (Tag, Card, BaseModalLayout)
- Delete old `SquareChip.vue` and `SquareChip.stories.ts`
- Add E2E screenshot test for template card overlay tags

Foundation for migrating PrimeVue `Chip` and `Tag` components in
follow-up PRs.

## Test plan
- [x] Unit tests pass (5 tests: rendering, removable, icon slot)
- [x] E2E screenshot test: template cards with overlay tags
- [x] Typecheck passes
- [x] Lint passes
- [ ] Verify Tag stories render correctly in Storybook
- [ ] Verify WorkflowTemplateSelectorDialog tags display correctly
- [ ] Verify SampleModelSelector chips display correctly

## Follow-up work
- **PR 4** (#10673): Migrate PrimeVue `Chip` → custom `Tag`
(SearchFilterChip, NodeSearchItem, DownloadItem)
- **PR 5** (planned): Migrate PrimeVue `Tag` → custom `Tag` (~14 files)

browser_tests/tests/templates.spec.ts

@@ -2,6 +2,7 @@ import type { Page } from '@playwright/test'
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { TestIds } from '../fixtures/selectors'
 
 async function checkTemplateFileExists(
   page: Page,
@@ -345,4 +346,71 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
       )
     }
   )
+
+  test(
+    'template cards display overlay tags correctly',
+    { tag: '@screenshot' },
+    async ({ comfyPage }) => {
+      await comfyPage.page.route('**/templates/index.json', async (route) => {
+        const response = [
+          {
+            moduleName: 'default',
+            title: 'Test Templates',
+            type: 'image',
+            templates: [
+              {
+                name: 'tagged-template',
+                title: 'Tagged Template',
+                mediaType: 'image',
+                mediaSubtype: 'webp',
+                description: 'A template with tags.',
+                tags: ['Relight', 'Image Edit']
+              },
+              {
+                name: 'no-tags',
+                title: 'No Tags',
+                mediaType: 'image',
+                mediaSubtype: 'webp',
+                description: 'A template without tags.'
+              }
+            ]
+          }
+        ]
+        await route.fulfill({
+          status: 200,
+          body: JSON.stringify(response),
+          headers: {
+            'Content-Type': 'application/json',
+            'Cache-Control': 'no-store'
+          }
+        })
+      })
+
+      await comfyPage.page.route('**/templates/**.webp', async (route) => {
+        await route.fulfill({
+          status: 200,
+          path: 'browser_tests/assets/example.webp',
+          headers: {
+            'Content-Type': 'image/webp',
+            'Cache-Control': 'no-store'
+          }
+        })
+      })
+
+      await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
+      await expect(comfyPage.templates.content).toBeVisible()
+
+      const taggedCard = comfyPage.page.getByTestId(
+        TestIds.templates.workflowCard('tagged-template')
+      )
+      await expect(taggedCard).toBeVisible({ timeout: 5000 })
+      await expect(taggedCard.getByText('Relight')).toBeVisible()
+      await expect(taggedCard.getByText('Image Edit')).toBeVisible()
+
+      const templateGrid = comfyPage.page.getByTestId(TestIds.templates.content)
+      await expect(templateGrid).toHaveScreenshot(
+        'template-cards-with-overlay-tags.png'
+      )
+    }
+  )
 })

src/components/card/Card.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { ref } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
-import SquareChip from '../chip/SquareChip.vue'
+import Tag from '@/components/chip/Tag.vue'
 import CardBottom from './CardBottom.vue'
 import CardContainer from './CardContainer.vue'
 import CardDescription from './CardDescription.vue'
@@ -174,7 +174,7 @@ const createCardTemplate = (args: CardStoryArgs) => ({
     CardTitle,
     CardDescription,
     Button,
-    SquareChip
+    Tag
   },
   setup() {
     const favorited = ref(false)
@@ -218,7 +218,7 @@ const createCardTemplate = (args: CardStoryArgs) => ({
             </template>
             
             <template v-if="args.showTopLeft" #top-left>
-              <SquareChip label="Featured" />
+              <Tag label="Featured" />
             </template>
             
             <template v-if="args.showTopRight" #top-right>
@@ -238,17 +238,17 @@ const createCardTemplate = (args: CardStoryArgs) => ({
             </template>
             
             <template v-if="args.showBottomLeft" #bottom-left>
-              <SquareChip label="New" />
+              <Tag label="New" />
             </template>
             
             <template v-if="args.showBottomRight" #bottom-right>
-              <SquareChip v-if="args.showFileType" :label="args.fileType" />
-              <SquareChip v-if="args.showFileSize" :label="args.fileSize" />
-              <SquareChip v-for="tag in args.tags" :key="tag" :label="tag">
+              <Tag v-if="args.showFileType" :label="args.fileType" />
+              <Tag v-if="args.showFileSize" :label="args.fileSize" />
+              <Tag v-for="tag in args.tags" :key="tag" :label="tag">
                 <template v-if="tag === 'LoRA'" #icon>
                   <i class="icon-[lucide--folder] size-3" />
                 </template>
-              </SquareChip>
+              </Tag>
             </template>
           </CardTop>
         </template>

src/components/chip/SquareChip.stories.ts

@@ -1,36 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import SquareChip from './SquareChip.vue'
-
-const meta: Meta<typeof SquareChip> = {
-  title: 'Components/SquareChip',
-  component: SquareChip,
-  tags: ['autodocs'],
-  argTypes: {
-    label: {
-      control: 'text',
-      defaultValue: 'Tag'
-    }
-  }
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const TagList: Story = {
-  render: () => ({
-    components: { SquareChip },
-    template: `
-      <div class="flex flex-wrap gap-2">
-        <SquareChip label="JavaScript" />
-        <SquareChip label="TypeScript" />
-        <SquareChip label="Vue.js" />
-        <SquareChip label="React" />
-        <SquareChip label="Node.js" />
-        <SquareChip label="Python" />
-        <SquareChip label="Docker" />
-        <SquareChip label="Kubernetes" />
-      </div>
-    `
-  })
-}

src/components/chip/SquareChip.vue

@@ -1,31 +0,0 @@
-<template>
-  <div :class="chipClasses">
-    <slot name="icon"></slot>
-    <span>{{ label }}</span>
-  </div>
-</template>
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import { cn } from '@/utils/tailwindUtil'
-
-const { label, variant = 'dark' } = defineProps<{
-  label: string
-  variant?: 'dark' | 'light' | 'gray'
-}>()
-
-const baseClasses =
-  'inline-flex shrink-0 items-center justify-center gap-1 rounded px-2 py-1 text-xs font-bold'
-
-const variantStyles = {
-  dark: 'bg-zinc-500/40 text-white/90',
-  light: cn('bg-base-background/50 text-base-foreground backdrop-blur-[2px]'),
-  gray: cn(
-    'bg-modal-card-tag-background text-base-foreground backdrop-blur-[2px]'
-  )
-}
-
-const chipClasses = computed(() => {
-  return cn(baseClasses, variantStyles[variant])
-})
-</script>

src/components/chip/Tag.stories.ts

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import Tag from './Tag.vue'
+
+const meta: Meta<typeof Tag> = {
+  title: 'Components/Tag',
+  component: Tag,
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text' },
+    shape: {
+      control: 'select',
+      options: ['square', 'rounded', 'overlay']
+    },
+    state: {
+      control: 'select',
+      options: ['default', 'unselected', 'selected']
+    },
+    removable: { control: 'boolean' }
+  },
+  args: {
+    label: 'Tag',
+    shape: 'square',
+    state: 'default',
+    removable: false
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Rounded: Story = {
+  args: {
+    label: 'Tag',
+    shape: 'rounded'
+  }
+}
+
+export const Unselected: Story = {
+  args: {
+    label: 'Tag',
+    state: 'unselected'
+  }
+}
+
+export const Removable: Story = {
+  args: {
+    label: 'Tag',
+    removable: true
+  }
+}
+
+export const AllStates: Story = {
+  render: () => ({
+    components: { Tag },
+    template: `
+      <div class="flex flex-col gap-4">
+        <div>
+          <p class="mb-2 text-xs text-muted-foreground">Square</p>
+          <div class="flex items-center gap-2">
+            <Tag label="Default" />
+            <Tag label="Unselected" state="unselected" />
+            <Tag label="Removable" removable />
+          </div>
+        </div>
+        <div>
+          <p class="mb-2 text-xs text-muted-foreground">Rounded</p>
+          <div class="flex items-center gap-2">
+            <Tag label="Default" shape="rounded" />
+            <Tag label="Unselected" shape="rounded" state="unselected" />
+            <Tag label="Removable" shape="rounded" removable />
+          </div>
+        </div>
+        <div class="bg-zinc-800 p-2 rounded">
+          <p class="mb-2 text-xs text-muted-foreground">Overlay (on images)</p>
+          <div class="flex items-center gap-2">
+            <Tag label="png" shape="overlay" />
+            <Tag label="1.2 MB" shape="overlay" />
+          </div>
+        </div>
+      </div>
+    `
+  })
+}
+
+export const TagList: Story = {
+  render: () => ({
+    components: { Tag },
+    template: `
+      <div class="flex flex-wrap gap-2">
+        <Tag label="JavaScript" />
+        <Tag label="TypeScript" />
+        <Tag label="Vue.js" />
+        <Tag label="React" />
+        <Tag label="Node.js" />
+        <Tag label="Python" />
+        <Tag label="Docker" />
+        <Tag label="Kubernetes" />
+      </div>
+    `
+  })
+}

src/components/chip/Tag.test.ts

@@ -0,0 +1,66 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import Tag from './Tag.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: { g: { remove: 'Remove' } } }
+})
+
+function renderTag(
+  props: {
+    label: string
+    shape?: 'square' | 'rounded'
+    removable?: boolean
+    onRemove?: (...args: unknown[]) => void
+  },
+  options?: { slots?: Record<string, string> }
+) {
+  return render(Tag, {
+    props,
+    global: { plugins: [i18n] },
+    ...options
+  })
+}
+
+describe('Tag', () => {
+  it('renders label text', () => {
+    renderTag({ label: 'JavaScript' })
+    expect(screen.getByText('JavaScript')).toBeInTheDocument()
+  })
+
+  it('does not show remove button by default', () => {
+    renderTag({ label: 'Test' })
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  })
+
+  it('shows remove button when removable', () => {
+    renderTag({ label: 'Test', removable: true })
+    expect(screen.getByRole('button', { name: 'Remove' })).toBeInTheDocument()
+  })
+
+  it('emits remove event when remove button is clicked', async () => {
+    const user = userEvent.setup()
+    const onRemove = vi.fn()
+    renderTag({ label: 'Test', removable: true, onRemove })
+
+    await user.click(screen.getByRole('button', { name: 'Remove' }))
+    expect(onRemove).toHaveBeenCalledOnce()
+  })
+
+  it('renders icon slot content', () => {
+    renderTag(
+      { label: 'LoRA' },
+      {
+        slots: {
+          icon: '<i data-testid="tag-icon" class="icon-[lucide--folder]" />'
+        }
+      }
+    )
+    expect(screen.getByTestId('tag-icon')).toBeInTheDocument()
+  })
+})

src/components/chip/Tag.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+import { tagVariants } from './tag.variants'
+import type { TagVariants } from './tag.variants'
+
+const {
+  label,
+  shape = 'square',
+  state = 'default',
+  removable = false,
+  class: className
+} = defineProps<{
+  label: string
+  shape?: TagVariants['shape']
+  state?: TagVariants['state']
+  removable?: boolean
+  class?: string
+}>()
+
+const emit = defineEmits<{
+  remove: [event: Event]
+}>()
+
+const tagClass = computed(() =>
+  cn(tagVariants({ shape, state, removable }), className)
+)
+</script>
+
+<template>
+  <span :class="tagClass">
+    <slot name="icon" />
+    <span class="truncate">{{ label }}</span>
+    <button
+      v-if="removable"
+      type="button"
+      :aria-label="$t('g.remove')"
+      class="inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full p-0.5 hover:bg-white/10"
+      @click.stop="emit('remove', $event)"
+    >
+      <i class="icon-[lucide--x] size-3" aria-hidden="true" />
+    </button>
+  </span>
+</template>

src/components/chip/tag.variants.ts

@@ -0,0 +1,29 @@
+import type { VariantProps } from 'cva'
+import { cva } from 'cva'
+
+export const tagVariants = cva({
+  base: 'inline-flex h-6 shrink-0 items-center justify-center gap-1 text-xs',
+  variants: {
+    shape: {
+      square: 'rounded-sm bg-modal-card-tag-background',
+      rounded: 'rounded-full bg-secondary-background',
+      overlay: 'rounded-sm bg-zinc-500/40 text-white/90'
+    },
+    state: {
+      default: 'text-modal-card-tag-foreground',
+      unselected: 'text-muted-foreground opacity-70',
+      selected: 'text-modal-card-tag-foreground'
+    },
+    removable: {
+      true: 'py-1 pr-1 pl-2',
+      false: 'px-2 py-1'
+    }
+  },
+  defaultVariants: {
+    shape: 'square',
+    state: 'default',
+    removable: false
+  }
+})
+
+export type TagVariants = VariantProps<typeof tagVariants>

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -265,10 +265,11 @@
                 </template>
                 <template #bottom-right>
                   <template v-if="template.tags && template.tags.length > 0">
-                    <SquareChip
+                    <Tag
                       v-for="tag in template.tags"
                       :key="tag"
                       :label="tag"
+                      shape="overlay"
                     />
                   </template>
                 </template>
@@ -402,7 +403,7 @@ import { useI18n } from 'vue-i18n'
 import CardBottom from '@/components/card/CardBottom.vue'
 import CardContainer from '@/components/card/CardContainer.vue'
 import CardTop from '@/components/card/CardTop.vue'
-import SquareChip from '@/components/chip/SquareChip.vue'
+import Tag from '@/components/chip/Tag.vue'
 import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import MultiSelect from '@/components/input/MultiSelect.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'

src/components/widget/SampleModelSelector.vue

@@ -99,13 +99,13 @@
                 </Button>
               </template>
               <template #bottom-right>
-                <SquareChip label="png" />
-                <SquareChip label="1.2 MB" />
-                <SquareChip label="LoRA">
+                <Tag label="png" shape="overlay" />
+                <Tag label="1.2 MB" shape="overlay" />
+                <Tag label="LoRA" shape="overlay">
                   <template #icon>
                     <i class="icon-[lucide--folder]" />
                   </template>
-                </SquareChip>
+                </Tag>
               </template>
             </CardTop>
           </template>
@@ -129,7 +129,7 @@ import MoreButton from '@/components/button/MoreButton.vue'
 import CardBottom from '@/components/card/CardBottom.vue'
 import CardContainer from '@/components/card/CardContainer.vue'
 import CardTop from '@/components/card/CardTop.vue'
-import SquareChip from '@/components/chip/SquareChip.vue'
+import Tag from '@/components/chip/Tag.vue'
 import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import MultiSelect from '@/components/input/MultiSelect.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'

src/components/widget/layout/BaseModalLayout.stories.ts

@@ -6,7 +6,7 @@ import MoreButton from '@/components/button/MoreButton.vue'
 import CardBottom from '@/components/card/CardBottom.vue'
 import CardContainer from '@/components/card/CardContainer.vue'
 import CardTop from '@/components/card/CardTop.vue'
-import SquareChip from '@/components/chip/SquareChip.vue'
+import Tag from '@/components/chip/Tag.vue'
 import MultiSelect from '@/components/input/MultiSelect.vue'
 import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'
@@ -76,7 +76,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
     CardContainer,
     CardTop,
     CardBottom,
-    SquareChip
+    Tag
   },
   setup() {
     const t = (k: string) => k
@@ -276,13 +276,13 @@ const createStoryTemplate = (args: StoryArgs) => ({
                     </Button>
                   </template>
                   <template #bottom-right>
-                    <SquareChip label="png" />
-                    <SquareChip label="1.2 MB" />
-                    <SquareChip label="LoRA">
+                    <Tag label="png" />
+                    <Tag label="1.2 MB" />
+                    <Tag label="LoRA">
                       <template #icon>
                         <i class="icon-[lucide--folder] size-3" />
                       </template>
-                    </SquareChip>
+                    </Tag>
                   </template>
                 </CardTop>
               </template>
@@ -392,13 +392,13 @@ const createStoryTemplate = (args: StoryArgs) => ({
                     </Button>
                   </template>
                   <template #bottom-right>
-                    <SquareChip label="png" />
-                    <SquareChip label="1.2 MB" />
-                    <SquareChip label="LoRA">
+                    <Tag label="png" />
+                    <Tag label="1.2 MB" />
+                    <Tag label="LoRA">
                       <template #icon>
                         <i class="icon-[lucide--folder] size-3" />
                       </template>
-                    </SquareChip>
+                    </Tag>
                   </template>
                 </CardTop>
               </template>