Tag

Small label with a status dot for marking, categorizing, or filtering items. Each tag shows a colored dot before the label by default.

Basic

DefaultPrimarySuccessWarningDangerInfo

vue

<script setup>
import { VxTag } from 'veloxui'
</script>

<template>
  <VxTag>Default</VxTag>
  <VxTag type="primary">Primary</VxTag>
  <VxTag type="success">Success</VxTag>
  <VxTag type="warning">Warning</VxTag>
  <VxTag type="danger">Danger</VxTag>
  <VxTag type="info">Info</VxTag>
</template>

Variants

Three visual styles: soft (default), solid, and outline.

SoftDefaultPrimarySuccessWarningDangerInfo

SolidDefaultPrimarySuccessWarningDangerInfo

OutlineDefaultPrimarySuccessWarningDangerInfo

vue

<script setup>
import { VxTag } from 'veloxui'
</script>

<template>
  <!-- Soft (default) — light background, colored text -->
  <VxTag variant="soft" type="primary">Primary</VxTag>

  <!-- Solid — filled background, white text -->
  <VxTag variant="solid" type="primary">Primary</VxTag>

  <!-- Outline — transparent background, colored border -->
  <VxTag variant="outline" type="primary">Primary</VxTag>
</template>

Sizes

Available in sm, md (default), and lg.

SmallMediumLarge

vue

<script setup>
import { VxTag } from 'veloxui'
</script>

<template>
  <VxTag size="sm" type="primary">Small</VxTag>
  <VxTag size="md" type="primary">Medium</VxTag>
  <VxTag size="lg" type="primary">Large</VxTag>
</template>

Rounded

Add rounded for pill-shaped tags.

DefaultPrimarySuccessDanger

vue

<script setup>
import { VxTag } from 'veloxui'
</script>

<template>
  <VxTag rounded>Default</VxTag>
  <VxTag rounded type="primary">Primary</VxTag>
  <VxTag rounded type="success" variant="solid">Success</VxTag>
  <VxTag rounded type="danger" variant="outline">Danger</VxTag>
</template>

Closable

Add closable to show a close button. Listen to @close to handle removal.

VueReactAngularSvelte

vue

<script setup>
import { ref } from 'vue'
import { VxTag } from 'veloxui'

const tags = ref(['Vue', 'React', 'Angular', 'Svelte'])

function removeTag(tag) {
  tags.value = tags.value.filter(t => t !== tag)
}
</script>

<template>
  <VxTag
    v-for="tag in tags"
    :key="tag"
    type="primary"
    closable
    @close="removeTag(tag)"
  >
    {{ tag }}
  </VxTag>
</template>

Checkable

Toggle tags on/off like filter chips. Use v-model:checked for controlled state.

VueReactAngular Selected: Vue

vue

<script setup>
import { ref } from 'vue'
import { VxTag } from 'veloxui'

const vue = ref(true)
const react = ref(false)
const angular = ref(false)
</script>

<template>
  <!-- "checkable" makes the tag toggle on click -->
  <!-- Unchecked tags appear muted, checked tags show a checkmark + color -->
  <VxTag type="primary" checkable v-model:checked="vue" rounded>Vue</VxTag>
  <VxTag type="success" checkable v-model:checked="react" rounded>React</VxTag>
  <VxTag type="warning" checkable v-model:checked="angular" rounded>Angular</VxTag>
</template>

Clickable

Add clickable for hover/active styles and pointer cursor. Useful for filter tags or links.

Filter: ActiveCategoryView all

vue

<script setup>
import { VxTag } from 'veloxui'
</script>

<template>
  <!-- "clickable" adds hover/active feedback and pointer cursor -->
  <VxTag type="primary" clickable rounded @click="doSomething">Filter: Active</VxTag>
  <VxTag type="info" variant="solid" clickable rounded>View all</VxTag>
</template>

Avatar

Use the avatar prop to show a small image before the label. Great for user tags.

Olivia Martin

Jackson Lee

Isabella

vue

<script setup>
import { VxTag } from 'veloxui'
</script>

<template>
  <!-- "avatar" shows a small circular image, replacing the dot -->
  <VxTag avatar="https://i.pravatar.cc/40?u=olivia" type="primary" rounded>
    Olivia Martin
  </VxTag>
  <VxTag avatar="/path/to/avatar.jpg" type="success" rounded closable>
    Jackson Lee
  </VxTag>
</template>

Loading

Add loading to show a spinner instead of the dot. Disables interaction while loading.

DeployingSyncingProcessing

vue

<script setup>
import { ref } from 'vue'
import { VxTag } from 'veloxui'

const loading = ref(true)
</script>

<template>
  <!-- "loading" replaces the dot with a spinner and disables interaction -->
  <VxTag type="primary" :loading="loading" rounded>Deploying</VxTag>
  <VxTag type="success" loading rounded>Syncing</VxTag>
</template>

Truncate

Set max-width to clip long text with an ellipsis. Hover to see the full text via the browser tooltip.

ShortThis is a very long tag label that should be truncatedOverflow text here

vue

<script setup>
import { VxTag } from 'veloxui'
</script>

<template>
  <!-- "max-width" truncates with ellipsis when text overflows -->
  <VxTag type="primary" :max-width="120" rounded>Short</VxTag>
  <VxTag type="success" :max-width="120" rounded>
    This is a very long tag label that should be truncated
  </VxTag>
</template>

Counter

Use the count prop to show a small badge inside the tag.

Bugs5Errors99Done3Alert!

vue

<script setup>
import { VxTag } from 'veloxui'
</script>

<template>
  <!-- "count" adds a small counter badge inside the tag -->
  <VxTag type="primary" :count="5" rounded>Bugs</VxTag>
  <VxTag type="danger" :count="99" variant="solid" rounded>Errors</VxTag>
  <VxTag type="warning" count="!" rounded>Alert</VxTag>
</template>

Editable

Add editable to allow renaming by double-click. Press Enter to save, Escape to cancel.

Click meDouble-click to editDouble-click a tag to rename

vue

<script setup>
import { ref } from 'vue'
import { VxTag } from 'veloxui'

const tags = ref(['Frontend', 'Backend'])

function onEdit(idx, newValue) {
  tags.value[idx] = newValue
}
</script>

<template>
  <!-- "editable" enables double-click to rename -->
  <!-- @edit fires with the new value when Enter is pressed -->
  <VxTag
    v-for="(tag, idx) in tags"
    :key="idx"
    type="primary"
    editable
    rounded
    @edit="(val) => onEdit(idx, val)"
  >
    {{ tag }}
  </VxTag>
</template>

Animated

Use the effect prop to add continuous animations.

PulseDot pulses with a ring — live / online status

BounceWhole tag bounces — draws attention to new items

ShakeHorizontal shake — errors or urgency

GlowPulsing box-shadow glow — emphasis

WaveShimmer sweep — loading or processing

vue

<script setup>
import { VxTag } from 'veloxui'
</script>

<template>
  <VxTag type="success" effect="pulse" rounded>Online</VxTag>
  <VxTag type="primary" effect="bounce" rounded>New</VxTag>
  <VxTag type="danger" effect="shake" rounded>Error</VxTag>
  <VxTag type="warning" effect="glow" variant="solid" rounded>Important</VxTag>
  <VxTag type="info" effect="wave" variant="solid" rounded>Loading</VxTag>
</template>

Custom Color

Use the color prop to set a custom color. Works with all variants.

VioletPinkCyanOrange

vue

<script setup>
import { VxTag } from 'veloxui'
</script>

<template>
  <VxTag color="#8b5cf6">Violet</VxTag>
  <VxTag color="#ec4899" variant="solid">Pink</VxTag>
  <VxTag color="#06b6d4" variant="outline">Cyan</VxTag>
  <VxTag color="#f97316" closable>Orange</VxTag>
</template>

Icon Slot

Use the icon slot to replace the default dot with a custom icon.

Approved Rejected Info

vue

<script setup>
import { VxTag } from 'veloxui'
</script>

<template>
  <!-- The "icon" slot replaces the default dot with a custom icon -->
  <VxTag type="success" variant="solid" rounded>
    <template #icon>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
    </template>
    Approved
  </VxTag>
</template>

Disabled

Add disabled to prevent interaction.

DisabledCan't closeDisabled

vue

<script setup>
import { VxTag } from 'veloxui'
</script>

<template>
  <VxTag disabled>Disabled</VxTag>
  <VxTag type="primary" disabled closable>Can't close</VxTag>
  <VxTag type="success" variant="solid" disabled>Disabled</VxTag>
</template>

Use VxTagGroup with addable to let users add new tags inline. The + button turns into an input field.

vue

<script setup>
import { ref } from 'vue'
import { VxTag, VxTagGroup } from 'veloxui'

const tags = ref(['Frontend', 'Backend', 'DevOps'])

function onAdd(value) {
  tags.value.push(value)
}

function onRemove(tag) {
  tags.value = tags.value.filter(t => t !== tag)
}
</script>

<template>
  <!-- "addable" shows a + button that becomes an input on click -->
  <!-- @add fires with the new tag text when Enter is pressed -->
  <VxTagGroup addable add-text="Add tag" @add="onAdd" rounded>
    <VxTag
      v-for="tag in tags"
      :key="tag"
      type="primary"
      closable
      @close="onRemove(tag)"
    >
      {{ tag }}
    </VxTag>
  </VxTagGroup>
</template>

Add draggable to VxTagGroup to enable drag & drop reordering.

vue

<script setup>
import { ref } from 'vue'
import { VxTag, VxTagGroup } from 'veloxui'

const tags = ref(['Design', 'Develop', 'Test', 'Deploy', 'Monitor'])

function onReorder(order) {
  tags.value = order.map(i => tags.value[i])
}
</script>

<template>
  <!-- "draggable" lets users reorder tags by dragging -->
  <!-- @reorder fires with the new index order array -->
  <VxTagGroup draggable @reorder="onReorder" rounded>
    <VxTag v-for="tag in tags" :key="tag" type="info" closable>{{ tag }}</VxTag>
  </VxTagGroup>
</template>

API

VxTag Props

Prop	Type	Default	Description
`type`	`'default' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'default'`	Color type
`variant`	`'soft' \| 'solid' \| 'outline'`	`'soft'`	Visual style
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tag size
`effect`	`'pulse' \| 'bounce' \| 'shake' \| 'glow' \| 'wave'`	—	Animation effect
`closable`	`boolean`	`false`	Show close button
`disabled`	`boolean`	`false`	Disable interactions
`rounded`	`boolean`	`false`	Pill shape (full border-radius)
`color`	`string`	—	Custom color (overrides type)
`checkable`	`boolean`	`false`	Toggle on/off on click
`checked`	`boolean`	—	Checked state (v-model)
`clickable`	`boolean`	`false`	Hover/active styles + pointer cursor
`loading`	`boolean`	`false`	Show spinner, disable interaction
`maxWidth`	`string \| number`	—	Truncate with ellipsis
`avatar`	`string`	—	Image URL shown before label
`count`	`string \| number`	—	Counter badge inside tag
`editable`	`boolean`	`false`	Double-click to rename

VxTag Slots

Slot	Description
`default`	Tag content
`icon`	Replaces the default dot with a custom icon

VxTag Events

Event	Payload	Description
`close`	—	Close button clicked
`click`	`MouseEvent`	Tag clicked
`update:checked`	`boolean`	Checked state changed (checkable)
`edit`	`string`	New value after inline edit

VxTagGroup Props

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Default size for child tags
`type`	`TagType`	—	Default type for child tags
`variant`	`TagVariant`	—	Default variant for child tags
`rounded`	`boolean`	`false`	Default rounded for child tags
`closable`	`boolean`	`false`	Default closable for child tags
`draggable`	`boolean`	`false`	Enable drag & drop reordering
`addable`	`boolean`	`false`	Show "+ New Tag" add button
`addText`	`string`	`'New Tag'`	Placeholder text for add input

VxTagGroup Events

Event	Payload	Description
`add`	`string`	New tag text submitted
`reorder`	`number[]`	New order as index array

Tag ​

Basic ​

Variants ​

Sizes ​

Rounded ​

Closable ​

Checkable ​

Clickable ​

Avatar ​

Loading ​

Truncate ​

Counter ​

Editable ​

Animated ​

Custom Color ​

Icon Slot ​

Disabled ​

Tag Group — Addable ​

Tag Group — Draggable ​

API ​

VxTag Props ​

VxTag Slots ​

VxTag Events ​

VxTagGroup Props ​

VxTagGroup Events ​

Tag