@vibe-labs/design-components-badges

Badge component tokens, styles, and TypeScript types for the Vibe Design System.

Installation

npm install @vibe-labs/design-components-badges

@import "@vibe-labs/design-components-badges";

import { BadgeSizes, BadgeVariants } from "@vibe-labs/design-components-badges/types";
import type { BadgeSize, BadgeVariant, BadgeStyleProps } from "@vibe-labs/design-components-badges/types";

Contents

Tokens

CSS custom properties defined in @layer vibe.tokens (file: badge.css).

Sizing

Token	sm	md	lg
--badge-height-{size}	1.25rem	1.5rem	1.75rem
--badge-px-{size}	--space-1	--space-2	--space-3
--badge-font-size-{size}	--text-xs	--text-xs	--text-sm

Appearance

Token	Default
--badge-radius	--radius-full
--badge-font-weight	--font-semibold
--badge-bg	--surface-elevated
--badge-color	--text-secondary
--badge-border-width	--border-width-1

Generated Styles

Component classes generated into @layer vibe.components (file: badge.g.css).

Variants

Variant	Background	Text color
accent	--color-accent	--color-accent-contrast
success	--color-success	--color-accent-contrast
warning	--color-warning	--color-neutral-900
danger	--color-danger	--color-accent-contrast
info	--color-info	--color-accent-contrast
accent-subtle	--overlay-tint	--color-accent
success-subtle	--surface-success-subtle	--color-success
warning-subtle	--surface-warning-subtle	--color-warning
danger-subtle	--surface-danger-subtle	--color-danger
info-subtle	--surface-info-subtle	--color-info
outline	transparent	--text-secondary

Sizes

sm · md (default) · lg

Modifiers

Modifier	Description
data-dot	Collapses to a 0.5rem status dot (no text)
data-pill	Full border radius
data-square	Small border radius
data-interactive	Pointer cursor + hover opacity transition
data-removable	Reduced right padding (for close/remove icon)

Badge Group

Flex container with wrap and gap for rendering multiple badges together.

TypeScript Types

BadgeSizes    // ["sm", "md", "lg"]
BadgeVariants // ["accent", "success", "warning", "danger", "info",
              //  "accent-subtle", "success-subtle", "warning-subtle",
              //  "danger-subtle", "info-subtle", "outline"]

type BadgeSize
type BadgeVariant

interface BadgeStyleProps {
  variant?: BadgeVariant
  size?: BadgeSize
  dot?: boolean
  pill?: boolean
  square?: boolean
  interactive?: boolean
  removable?: boolean
}

interface BadgeGroupStyleProps { label?: string }

Dist Structure

File	Description
index.css	Barrel — imports tokens + generated styles
badge.css	Token definitions
badge.g.css	Generated component styles
index.js / index.d.ts	TypeScript types + runtime constants

Dependencies

Requires tokens from @vibe-labs/design (colors, surfaces, spacing, borders, typography).

Build

npm run build

---

Usage Guide

Import

@import "@vibe-labs/design-components-badges";

import type { BadgeStyleProps } from "@vibe-labs/design-components-badges/types";

Variants

Variant

Set data-variant on .badge: accent · success · warning · danger · info · accent-subtle · success-subtle · warning-subtle · danger-subtle · info-subtle · outline

Size

Set data-size on .badge: sm · md (default) · lg

Boolean flags

• data-dot — collapses to a status dot (no text)
• data-pill — forces full border radius
• data-square — forces small border radius
• data-interactive — adds pointer cursor and hover opacity
• data-removable — reduces right padding (when appending a remove button)

Examples

Semantic variant badges

<!-- Solid semantic variants -->
<span class="badge" data-variant="accent">New</span>
<span class="badge" data-variant="success">Active</span>
<span class="badge" data-variant="warning">Pending</span>
<span class="badge" data-variant="danger">Blocked</span>
<span class="badge" data-variant="info">Info</span>

Subtle and outline variants

<!-- Subtle tinted variants -->
<span class="badge" data-variant="success-subtle">Approved</span>
<span class="badge" data-variant="danger-subtle">Overdue</span>

<!-- Outline (transparent bg) -->
<span class="badge" data-variant="outline">Draft</span>

Sizes

<span class="badge" data-variant="accent" data-size="sm">Small</span>
<span class="badge" data-variant="accent">Medium</span>
<span class="badge" data-variant="accent" data-size="lg">Large</span>

Status dot

<!-- Dot with no text — useful for presence indicators -->
<span class="badge" data-variant="success" data-dot></span>
<span class="badge" data-variant="danger" data-dot></span>

Interactive badge with remove

<!-- Removable badge — reduced right padding leaves room for a close button -->
<span class="badge" data-variant="accent-subtle" data-removable data-interactive>
  Design System
  <button class="close-btn" data-size="sm" aria-label="Remove tag">
    <svg><!-- × --></svg>
  </button>
</span>

Badge group

<!-- Multiple badges in a flex-wrap container -->
<div class="badge-group" aria-label="Tags">
  <span class="badge" data-variant="accent-subtle">CSS</span>
  <span class="badge" data-variant="success-subtle">TypeScript</span>
  <span class="badge" data-variant="info-subtle">Vue</span>
</div>

With Vue

Use @vibe-labs/design-vue-badges for <SbBadge> and <SbBadgeGroup> components that accept BadgeStyleProps and handle data-attribute binding automatically.