Badge — Core

Badges

Small inline status indicators, counters, and labels. Badges scale with their parent font size and support contextual color variants, pill shapes, and three size tiers.

Contextual Variants

DefaultPrimarySecondarySuccessWarningDangerInfoLightDark

<!-- Default (secondary color) -->
<span class="vd-badge">Default</span>

<span class="vd-badge vd-badge-primary">Primary</span>
<span class="vd-badge vd-badge-secondary">Secondary</span>
<span class="vd-badge vd-badge-success">Success</span>
<span class="vd-badge vd-badge-warning">Warning</span>
<span class="vd-badge vd-badge-danger">Danger</span>
<span class="vd-badge vd-badge-info">Info</span>
<span class="vd-badge vd-badge-light">Light</span>
<span class="vd-badge vd-badge-dark">Dark</span>

Pill, Outlined & Sizes

Pill shape

NewDoneBlocked

Outlined

ProBeta

Sizes

SmallDefaultLarge

<!-- Pill badges (fully rounded) -->
<span class="vd-badge vd-badge-pill vd-badge-primary">New</span>

<!-- Outlined badges -->
<span class="vd-badge vd-badge-outlined vd-badge-primary">Pro</span>

<!-- Sizes -->
<span class="vd-badge vd-badge-sm vd-badge-primary">Small</span>
<span class="vd-badge vd-badge-lg vd-badge-primary">Large</span>

Positioned Badges (Buttons & Icons)

New

<!-- Badge on a button -->
<button class="vd-btn vd-btn-primary" style="position:relative;">
  Notifications
  <span class="vd-badge vd-badge-danger"
        style="position:absolute; top:-6px; right:-6px;">3</span>
</button>

<!-- Badge on an icon button -->
<button class="vd-btn vd-btn-icon vd-btn-secondary" style="position:relative;">
  <i class="ph ph-envelope"></i>
  <span class="vd-badge vd-badge-pill vd-badge-primary"
        style="position:absolute; top:-4px; right:-4px;">12</span>
</button>

API Reference

Usage

<script setup lang="ts">
import { VdBadge } from "@vanduo-oss/vd3";
</script>

<template>
  <VdBadge>Primary</VdBadge>            <!-- default variant is primary -->
  <VdBadge variant="success">Done</VdBadge>
  <VdBadge variant="danger" pill>Blocked</VdBadge>
</template>

CSS Classes

Class	Description
`.vd-badge`	Base badge. Inline-block with padding, rounded corners, and centered text.
`.vd-badge-primary`	Primary color background with white text.
`.vd-badge-secondary`	Secondary (teal/green) background.
`.vd-badge-success`	Green success background.
`.vd-badge-warning`	Amber warning background.
`.vd-badge-danger`	Red danger background — the unified status name (matches Vue variant="danger").
`.vd-badge-error`	Retained backward-compatible alias for .vd-badge-danger.
`.vd-badge-info`	Cyan info background.
`.vd-badge-light`	Light gray background (inverted in dark mode).
`.vd-badge-dark`	Dark gray background with light text.
`.vd-badge-pill`	Fully rounded pill shape (border-radius: 50rem).
`.vd-badge-outlined`	Transparent background with colored border and text.
`.vd-badge-sm`	Compact size (font-size: 0.65em).
`.vd-badge-lg`	Large size (font-size: 0.875em).

Component API (Vue 3)

Prop / slot	Description
`:variant`	primary \| secondary \| success \| warning \| danger \| info (default "primary"). The bare .vd-badge class is neutral/secondary, but the VdBadge component defaults to primary.
`:pill`	Fully-rounded pill shape.
`default slot`	Badge content.
`(size / outline)`	CSS-only classes (.vd-badge-sm / -lg / -outlined) that ship in vd3's CSS — not wrapped as VdBadge props.

CSS Variables

Variable	Default
`--vd-badge-padding-y`	`0.25em`
`--vd-badge-padding-x`	`0.4em (ratio ~phi)`
`--vd-badge-padding-y-sm`	`0.15em`
`--vd-badge-padding-x-sm`	`0.25em (ratio ~phi)`
`--vd-badge-padding-y-lg`	`0.35em`
`--vd-badge-padding-x-lg`	`0.55em (ratio ~phi)`
`--vd-badge-font-size`	`0.75em`
`--vd-badge-font-weight`	`var(--vd-font-weight-semibold)`
`--vd-badge-border-radius`	`var(--vd-btn-border-radius-sm)`
`--vd-badge-pill-border-radius`	`50rem`

Accessibility

Badges are inline elements; ensure they are placed inside a parent with sufficient text context.
For counter badges (e.g., "3" on a notification bell), wrap the parent button in an aria-label that includes the count: aria-label="Notifications, 3 unread".
All badge color combinations meet WCAG contrast requirements against both light and dark backgrounds.
Avoid using badges alone to convey critical status — pair with text or tooltips.