Tag · juxt.ui

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JTag } from '@juxtui/ui'

Usage #

<JTag remove-label="Remove Engineering" @remove="removeTag">Engineering</JTag>

A JBadge is a static label for status; a JTag is something the user attached and can take off again — it always carries a remove button.

Variants & examples #

Variants#

DraftActivePendingFailedNew

<template>
  <div class="flex flex-wrap gap-2">
    <JTag>Draft</JTag>
    <JTag variant="success">Active</JTag>
    <JTag variant="warning">Pending</JTag>
    <JTag variant="destructive">Failed</JTag>
    <JTag variant="accent">New</JTag>
  </div>
</template>

Sizes, icons and disabled#

Use the leading slot for a small icon.

Design Engineering Archived

<script setup lang="ts">
import { Tag as TagIcon } from '@lucide/vue'
</script>

<template>
  <div class="flex flex-wrap items-center gap-2">
    <JTag size="sm">Design</JTag>
    <JTag>
      <template #leading>
        <TagIcon class="h-3 w-3" />
      </template>
      Engineering
    </JTag>
    <JTag disabled>Archived</JTag>
  </div>
</template>

API #

Props

Prop	Type	Default	Description
variant	`'neutral' \| 'success' \| 'warning' \| 'destructive' \| 'accent'`	`'neutral'`	Meaning and colour.
size	`'sm' \| 'md'`	`'md'`	Height: 18 or 22px.
disabled	`boolean`	`false`	Fades the tag and disables the remove button.
removeLabel	`string`	—	Accessible label for the remove button, e.g. `"Remove Engineering"`. Defaults to "Remove".

Events

Event	Payload	Description
remove	—	The remove button was clicked. Suppressed while `disabled`.

Slots

Slot	Props	Description
default	—	Label.
leading	—	Icon before the label.

Accessibility #

The remove control is a real <button> with its own accessible name (removeLabel, defaulting to "Remove") — set it to name the specific tag, e.g. ` Remove ${tag} `, so a list of tags doesn’t announce as several identical "Remove" buttons.