@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 />

<!-- Hide when zero (default) -->
<VibeBadgeCount :count="0" />
<!-- Renders nothing -->

<!-- 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.