@vibe-labs/design-vue-badges

Vue 3 badge components for the Vibe Design System. Provides label badges, notification counts, and status dots.

Installation

import { VibeBadge, VibeBadgeCount, VibeDot } from "@vibe-labs/design-vue-badges";

Requires the CSS layer from @vibe-labs/design-components-badges.

Components

VibeBadge

Label badge with variant styling, auto-color generation, and optional dismiss button.

Usage

<!-- Basic -->
<VibeBadge label="New" />

<!-- Variants -->
<VibeBadge label="Active" variant="success" />
<VibeBadge label="Warning" variant="warning-subtle" />
<VibeBadge label="Outline" variant="outline" />

<!-- Auto-colored genre pills -->
<VibeBadge label="Electronic" auto-color />
<VibeBadge label="Jazz" auto-color />
<VibeBadge label="Hip Hop" auto-color />

<!-- Custom colors -->
<VibeBadge label="Custom" bg-color="#ff6b6b" />

<!-- Interactive -->
<VibeBadge label="Click me" interactive @click="handleClick" />

<!-- Dismissible -->
<VibeBadge label="Removable" dismissible @dismiss="handleRemove" />

<!-- With icons -->
<VibeBadge label="Tagged">
  <template #left><TagIcon /></template>
</VibeBadge>

<!-- Sizes -->
<VibeBadge label="Small" size="sm" />
<VibeBadge label="Large" size="lg" />

<!-- Shape -->
<VibeBadge label="Square" :pill="false" square />

Props

Prop	Type	Default	Description
label	string	required	Badge text content
variant	BadgeVariant	"accent-subtle"	Visual variant
size	BadgeSize	"md"	sm · md · lg
pill	boolean	true	Full border radius
square	boolean	false	Small border radius
interactive	boolean	false	Button role + hover state
dismissible	boolean	false	Show remove button, emit dismiss
autoColor	boolean	false	Deterministic color from label text
bgColor	string	—	Override background color
fgColor	string	—	Override text color (auto-contrasted from bgColor)

Events

Event	Payload	Description
dismiss	—	Remove button clicked

Slots

Slot	Description
left	Leading icon
right	Trailing icon (hidden when dismissible)
dismiss-icon	Custom dismiss button content (default: ×)

---

VibeBadgeCount

Notification count badge — works standalone (inline) or anchored to a child element.

Usage

<!-- Inline count -->
<VibeBadgeCount :count="5" />

<!-- Overflow -->
<VibeBadgeCount :count="150" :max="99" />
<!-- Renders: "99+" -->

<!-- Anchored to an icon/button -->
<VibeBadgeCount :count="3">
  <BellIcon />
</VibeBadgeCount>

<!-- Pulse on change -->
<VibeBadgeCount :count="unreadCount" pulse />

<!-- Show zero -->
<VibeBadgeCount :count="0" :hide-zero="false" />

<!-- Custom styling -->
<VibeBadgeCount :count="7" variant="accent" bg-color="#7c5cff" />

Props

Prop	Type	Default	Description
count	number	required	The count to display
max	number	99	Overflow threshold (shows max+)
variant	BadgeVariant	"danger"	Visual variant
size	BadgeSize	"sm"	Size preset
hideZero	boolean	true	Hide badge when count is 0
pulse	boolean	false	Pulse animation on count change
bgColor	string	—	Override background color
fgColor	string	—	Override text color

Slots

Slot	Description
default	Anchor element — when provided, count positions as superscript

---

VibeDot

Minimal status dot indicator.

Usage

<!-- Basic -->
<VibeDot />

<!-- Variants -->
<VibeDot variant="success" aria-label="Online" />
<VibeDot variant="danger" aria-label="Error" />

<!-- Pulsing (live indicator) -->
<VibeDot variant="success" pulse aria-label="Live" />

<!-- Custom color -->
<VibeDot color="#ff6b6b" aria-label="Custom status" />

Props

Prop	Type	Default	Description
variant	BadgeVariant	"accent"	Visual variant
color	string	—	Override dot color
pulse	boolean	false	Pulsing animation
ariaLabel	string	—	Accessible label (sets role="img", otherwise presentation)

Dependencies

Package	Purpose
@vibe-labs/core	ColorFromString for auto-color and contrast
@vibe-labs/design-components-badges	CSS tokens + generated styles

Build

npm run build

Built with Vite + vite-plugin-dts. Outputs ES module with TypeScript declarations.

---

Usage Guide

Setup

import { VibeBadge, VibeBadgeCount, VibeDot } from "@vibe-labs/design-vue-badges";
import "@vibe-labs/design-components-badges";

VibeBadge

Status and variant badges

<script setup lang="ts">
import { VibeBadge } from "@vibe-labs/design-vue-badges";
</script>

<template>
  <VibeBadge label="Active" variant="success" />
  <VibeBadge label="Pending" variant="warning-subtle" />
  <VibeBadge label="Archived" variant="muted" />
  <VibeBadge label="Error" variant="danger" />
</template>

Auto-colored genre/tag pills

<script setup lang="ts">
import { VibeBadge } from "@vibe-labs/design-vue-badges";

const genres = ["Electronic", "Jazz", "Hip Hop", "Classical", "Rock"];
</script>

<template>
  <!-- Each badge gets a unique deterministic color derived from its label -->
  <div style="display: flex; gap: 6px; flex-wrap: wrap">
    <VibeBadge v-for="genre in genres" :key="genre" :label="genre" auto-color />
  </div>
</template>

Dismissible filter chips

<script setup lang="ts">
import { VibeBadge } from "@vibe-labs/design-vue-badges";
import { ref } from "vue";

const activeFilters = ref(["Electronic", "Live", "2024"]);

function removeFilter(filter: string) {
  activeFilters.value = activeFilters.value.filter((f) => f !== filter);
}
</script>

<template>
  <div style="display: flex; gap: 6px">
    <VibeBadge
      v-for="filter in activeFilters"
      :key="filter"
      :label="filter"
      dismissible
      @dismiss="removeFilter(filter)"
    />
  </div>
</template>

VibeBadgeCount

Notification bell with count

<script setup lang="ts">
import { VibeBadgeCount } from "@vibe-labs/design-vue-badges";
import { ref } from "vue";

const unreadCount = ref(7);
</script>

<template>
  <!-- Count anchors as superscript over the icon -->
  <VibeBadgeCount :count="unreadCount" pulse>
    <BellIcon />
  </VibeBadgeCount>

  <!-- Standalone inline count -->
  <span>Notifications</span>
  <VibeBadgeCount :count="unreadCount" />
</template>

VibeDot

Live status indicator

<script setup lang="ts">
import { VibeDot } from "@vibe-labs/design-vue-badges";

defineProps<{ isLive: boolean }>();
</script>

<template>
  <div style="display: flex; align-items: center; gap: 6px">
    <VibeDot :variant="isLive ? 'success' : 'muted'" :pulse="isLive" :aria-label="isLive ? 'Live' : 'Offline'" />
    <span>{{ isLive ? "Live" : "Offline" }}</span>
  </div>
</template>

Common Patterns

Tag list with overflow

<script setup lang="ts">
import { VibeBadge } from "@vibe-labs/design-vue-badges";
import { VibeOverflowRow } from "@vibe-labs/design-vue-core";

const tags = [
  { id: 1, label: "House" },
  { id: 2, label: "Electronic" },
  { id: 3, label: "Minimal" },
  { id: 4, label: "Deep" },
];
</script>

<template>
  <VibeOverflowRow :items="tags">
    <template #item="{ item }">
      <VibeBadge :label="item.label" auto-color size="sm" />
    </template>
    <template #overflow="{ hiddenCount }">
      <VibeBadge :label="`+${hiddenCount}`" variant="muted" size="sm" />
    </template>
  </VibeOverflowRow>
</template>