@vibe-labs/design-components-badges

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

Usage

@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 (badge.css)

CSS custom properties defined in @layer vibe.tokens:

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 (badge.g.css)

Component classes generated into @layer vibe.components.

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 · lg (default: md)

Modifiers

• dot — collapses to a 0.5rem status dot (no text)
• pill — full border radius
• square — small border radius
• interactive — pointer cursor + hover opacity transition
• removable — reduced right padding (for close/remove icon)

Badge Group

Flex container with wrap and gap for multiple badges.

TypeScript Types (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