@usevyre/react @usevyre/vue

Tag

A standalone display chip for categories, labels, or filter selections. Compose multiple tags with TagGroup. For an editable tag input, use TagsInput instead.

Basic

A Tag renders its children as a label. Wrap several in a TagGroup for automatic spacing and wrapping. Tag has three variants: default, accent, and danger.

import { Tag, TagGroup } from "@usevyre/react";

<TagGroup>
  <Tag>Design</Tag>
  <Tag variant="accent">Featured</Tag>
  <Tag>Engineering</Tag>
  <Tag variant="danger">Deprecated</Tag>
</TagGroup>

<script setup>
import { Tag, TagGroup } from "@usevyre/vue";
</script>
<template>
  <TagGroup>
    <Tag>Design</Tag>
    <Tag variant="accent">Featured</Tag>
    <Tag>Engineering</Tag>
    <Tag variant="danger">Deprecated</Tag>
  </TagGroup>
</template>

Sizes

SmallMediumLarge

<Tag size="sm">Small</Tag>
<Tag size="md">Medium</Tag>
<Tag size="lg">Large</Tag>

<Tag size="sm">Small</Tag>
<Tag size="md">Medium</Tag>
<Tag size="lg">Large</Tag>

Removable

Provide onRemove (React) or use the removable prop with @remove (Vue) to render a × button. Useful for active filter chips.

const [tags, setTags] = useState(["react", "vue", "svelte"]);

<TagGroup>
  {tags.map((t) => (
    <Tag
      key={t}
      variant="accent"
      onRemove={() => setTags((prev) => prev.filter((x) => x !== t))}
    >
      {t}
    </Tag>
  ))}
</TagGroup>

<script setup>
const tags = ref(["react", "vue", "svelte"]);
function remove(t) {
  tags.value = tags.value.filter((x) => x !== t);
}
</script>
<template>
  <TagGroup>
    <Tag
      v-for="t in tags"
      :key="t"
      variant="accent"
      removable
      @remove="remove(t)"
    >
      {{ t }}
    </Tag>
  </TagGroup>
</template>

Clickable

Provide onClick (React) or use the clickable prop with @click (Vue) to make the whole tag interactive. It becomes keyboard accessible (Enter / Space) with a button role.

Active: react

const [active, setActive] = useState(["react"]);

function toggle(t) {
  setActive((prev) =>
    prev.includes(t) ? prev.filter((x) => x !== t) : [...prev, t]
  );
}

<TagGroup>
  {["react", "vue", "svelte"].map((t) => (
    <Tag
      key={t}
      variant={active.includes(t) ? "accent" : "default"}
      onClick={() => toggle(t)}
    >
      {t}
    </Tag>
  ))}
</TagGroup>

<script setup>
const active = ref(["react"]);
function toggle(t) {
  active.value = active.value.includes(t)
    ? active.value.filter((x) => x !== t)
    : [...active.value, t];
}
</script>
<template>
  <TagGroup>
    <Tag
      v-for="t in ['react', 'vue', 'svelte']"
      :key="t"
      :variant="active.includes(t) ? 'accent' : 'default'"
      clickable
      @click="toggle(t)"
    >
      {{ t }}
    </Tag>
  </TagGroup>
</template>

Tag props

Props

Prop	Type	Default	Description
`variant`	`"default" \| "accent" \| "danger"`	`"default"`	Visual style. default=neutral, accent=brand, danger=destructive/error. Use Badge for success/warning/teal.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size scale.
`onRemove`	`() => void`	`—`	React only. When provided, renders a × remove button. Vue: use removable prop + @remove event.
`onClick`	`() => void`	`—`	React only. Makes the whole tag interactive (keyboard accessible). Vue: use clickable prop + @click event.
`disabled`	`boolean`	`false`	Disables interaction (only relevant with onClick / onRemove).
`class / className`	`string`	`—`	Additional CSS class.

TagGroup props

TagGroup is a read-only layout container. It does not manage tag state — render Tag children yourself.

Props

Prop	Type	Default	Description
`gap`	`"sm" \| "md" \| "lg"`	`"md"`	Spacing between tags.
`wrap`	`boolean`	`true`	Wrap tags onto multiple lines when they overflow. Set false for single-line horizontal scroll.
`class / className`	`string`	`—`	Additional CSS class.

AI Context

Valid props

Prop	Values	Default
`variant`	`"default"`\|`"accent"`\|`"danger"`	`default`
`size`	`"sm"`\|`"md"`\|`"lg"`	`md`
`disabled`	`true`\|`false`	`false`

Common AI mistakes

Tag variant="success"→ Use Badge for success/warning/teal status colors; Tag is for categories/filters
Using Tag for tag input→ Use TagsInput for adding/removing tags via keyboard
Tag size="xl"→ Use size="lg"

Quick examples

Category tags in a group

<TagGroup>
  <Tag>Design</Tag>
  <Tag variant="accent">Featured</Tag>
  <Tag>Engineering</Tag>
</TagGroup>

Removable filter chip (React)

<Tag onRemove={() => removeFilter("react")}>react</Tag>

← Tabs Tags Input →