Default Theme: Badge

Learn how to use and customize badges in the VitePress default theme.

Basic Usage

Simple Badge

Add badges to highlight important information:

markdown

# API Reference <Badge type="info" text="v2.0" />

## getData() <Badge type="tip" text="New" />

This method is deprecated <Badge type="warning" text="Deprecated" />

## deleteUser() <Badge type="danger" text="Breaking Change" />

Badge Types

Available badge types:

info (default) - Blue badge for general information
tip - Green badge for tips and new features
warning - Yellow badge for warnings and deprecations
danger - Red badge for errors and breaking changes

Badge Configuration

Custom Text

Customize badge text:

markdown

# Feature <Badge type="tip" text="Beta" />
# API <Badge type="info" text="v1.2.0" />
# Method <Badge type="warning" text="Will be removed in v3" />

Custom Colors

Override badge colors with CSS:

css

/* Custom badge colors */
.vp-badge.custom {
  background-color: #8b5cf6;
  color: white;
}

.vp-badge.success {
  background-color: #10b981;
  color: white;
}

.vp-badge.error {
  background-color: #ef4444;
  color: white;
}

Use custom badges:

markdown

# Feature <Badge type="custom" text="Premium" />
# Status <Badge type="success" text="Active" />
# Error <Badge type="error" text="Failed" />

Advanced Usage

Badge with Links

Combine badges with links:

markdown

# API Reference <Badge type="info" text="v2.0" /> [View Changelog](/changelog)

## Method <Badge type="tip" text="New in v2.1" /> 
[See migration guide](/migration) for upgrading.

Conditional Badges

Show badges conditionally:

vue

<script setup>
import { computed } from 'vue'

const version = '2.1.0'
const isNew = computed(() => version >= '2.0.0')
const isDeprecated = computed(() => false)
</script>

# API Method 
<Badge v-if="isNew" type="tip" text="New" />
<Badge v-if="isDeprecated" type="warning" text="Deprecated" />

Dynamic Badge Content

Create dynamic badges:

vue

<script setup>
import { ref, computed } from 'vue'

const currentVersion = ref('2.1.0')
const badgeText = computed(() => `v${currentVersion.value}`)
const badgeType = computed(() => {
  const [major, minor] = currentVersion.value.split('.').map(Number)
  if (major >= 2) return 'tip'
  if (minor >= 5) return 'info'
  return 'warning'
})
</script>

# API Reference <Badge :type="badgeType" :text="badgeText" />

Styling Badges

CSS Customization

Customize badge appearance:

css

/* Badge container */
.vp-badge {
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 12px;
  padding: 2px 8px;
  margin-left: 8px;
  vertical-align: middle;
  border: 1px solid transparent;
}

/* Badge types */
.vp-badge.info {
  background-color: var(--vp-badge-info-bg);
  color: var(--vp-badge-info-text);
  border-color: var(--vp-badge-info-border);
}

.vp-badge.tip {
  background-color: var(--vp-badge-tip-bg);
  color: var(--vp-badge-tip-text);
  border-color: var(--vp-badge-tip-border);
}

.vp-badge.warning {
  background-color: var(--vp-badge-warning-bg);
  color: var(--vp-badge-warning-text);
  border-color: var(--vp-badge-warning-border);
}

.vp-badge.danger {
  background-color: var(--vp-badge-danger-bg);
  color: var(--vp-badge-danger-text);
  border-color: var(--vp-badge-danger-border);
}

CSS Variables

Override badge CSS variables:

css

:root {
  /* Info badge */
  --vp-badge-info-bg: #f0f9ff;
  --vp-badge-info-text: #0369a1;
  --vp-badge-info-border: #bae6fd;
  
  /* Tip badge */
  --vp-badge-tip-bg: #f0fdf4;
  --vp-badge-tip-text: #166534;
  --vp-badge-tip-border: #bbf7d0;
  
  /* Warning badge */
  --vp-badge-warning-bg: #fffbeb;
  --vp-badge-warning-text: #d97706;
  --vp-badge-warning-border: #fed7aa;
  
  /* Danger badge */
  --vp-badge-danger-bg: #fef2f2;
  --vp-badge-danger-text: #dc2626;
  --vp-badge-danger-border: #fecaca;
}

/* Dark mode */
.dark {
  --vp-badge-info-bg: #1e3a8a;
  --vp-badge-info-text: #bfdbfe;
  --vp-badge-info-border: #3b82f6;
  
  --vp-badge-tip-bg: #166534;
  --vp-badge-tip-text: #bbf7d0;
  --vp-badge-tip-border: #22c55e;
  
  --vp-badge-warning-bg: #d97706;
  --vp-badge-warning-text: #fed7aa;
  --vp-badge-warning-border: #f59e0b;
  
  --vp-badge-danger-bg: #dc2626;
  --vp-badge-danger-text: #fecaca;
  --vp-badge-danger-border: #ef4444;
}

Badge Patterns

Version Badges

Common patterns for version information:

markdown

# API Reference <Badge type="info" text="v2.0" />

## Methods

### getData() <Badge type="tip" text="Added in v1.5" />
### updateUser() <Badge type="info" text="Updated in v2.0" />
### deleteUser() <Badge type="warning" text="Deprecated in v2.1" />
### oldMethod() <Badge type="danger" text="Removed in v3.0" />

Status Badges

Show feature or API status:

markdown

# Features

## Authentication <Badge type="tip" text="Stable" />
## File Upload <Badge type="info" text="Beta" />
## Real-time Chat <Badge type="warning" text="Experimental" />
## Legacy API <Badge type="danger" text="Deprecated" />

Platform Badges

Indicate platform support:

markdown

# SDK Methods

## initialize() 
<Badge type="tip" text="iOS" />
<Badge type="tip" text="Android" />
<Badge type="tip" text="Web" />

## biometricAuth()
<Badge type="tip" text="iOS" />
<Badge type="tip" text="Android" />
<Badge type="warning" text="Web - Limited" />

## nativeFeature()
<Badge type="tip" text="iOS" />
<Badge type="tip" text="Android" />
<Badge type="danger" text="Web - Not Supported" />

Permission Badges

Show required permissions or access levels:

markdown

# Admin Panel

## User Management <Badge type="warning" text="Admin Only" />
## System Settings <Badge type="danger" text="Super Admin" />
## Reports <Badge type="info" text="Manager+" />
## Dashboard <Badge type="tip" text="All Users" />

Custom Badge Components

Enhanced Badge Component

Create a custom badge component:

vue

<!-- components/CustomBadge.vue -->
<template>
  <span 
    :class="[
      'custom-badge',
      `custom-badge--${type}`,
      { 'custom-badge--pulse': pulse }
    ]"
  >
    <Icon v-if="icon" :name="icon" class="custom-badge__icon" />
    {{ text }}
  </span>
</template>

<script setup>
defineProps({
  type: {
    type: String,
    default: 'info',
    validator: (value) => ['info', 'tip', 'warning', 'danger', 'success'].includes(value)
  },
  text: {
    type: String,
    required: true
  },
  icon: {
    type: String,
    default: null
  },
  pulse: {
    type: Boolean,
    default: false
  }
})
</script>

<style scoped>
.custom-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 12px;
  padding: 4px 8px;
  margin-left: 8px;
  vertical-align: middle;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.custom-badge--pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.custom-badge__icon {
  width: 12px;
  height: 12px;
}

/* Badge variants */
.custom-badge--success {
  background-color: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}

.custom-badge--info {
  background-color: #dbeafe;
  color: #1d4ed8;
  border-color: #93c5fd;
}

.custom-badge--tip {
  background-color: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}

.custom-badge--warning {
  background-color: #fef3c7;
  color: #d97706;
  border-color: #fcd34d;
}

.custom-badge--danger {
  background-color: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}
</style>

Usage:

markdown

# API Methods

## authenticate() <CustomBadge type="success" text="Stable" icon="check" />
## uploadFile() <CustomBadge type="warning" text="Beta" icon="warning" pulse />
## experimentalFeature() <CustomBadge type="danger" text="Experimental" icon="flask" />

Badge Group Component

Group related badges:

vue

<!-- components/BadgeGroup.vue -->
<template>
  <div class="badge-group">
    <slot />
  </div>
</template>

<style scoped>
.badge-group {
  display: inline-flex;
  gap: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

.badge-group :deep(.vp-badge) {
  margin-left: 0;
}
</style>

Usage:

markdown

# Multi-platform SDK 
<BadgeGroup>
  <Badge type="tip" text="iOS" />
  <Badge type="tip" text="Android" />
  <Badge type="info" text="Web" />
</BadgeGroup>

Accessibility

Make badges accessible:

vue

<template>
  <Badge 
    type="warning" 
    text="Deprecated"
    :aria-label="`This feature is deprecated and will be removed in a future version`"
  />
</template>

Semantic HTML

Use appropriate semantic elements:

vue

<template>
  <span 
    class="vp-badge"
    role="status"
    :aria-label="ariaLabel"
  >
    {{ text }}
  </span>
</template>

Best Practices

Usage Guidelines

Be Consistent - Use the same badge types for similar information
Keep Text Short - Badge text should be concise and clear
Use Appropriate Colors - Match badge types to their semantic meaning
Don't Overuse - Too many badges can clutter the interface

Content Guidelines

Version Information - Use info type for version numbers
New Features - Use tip type for new additions
Deprecations - Use warning type for deprecated features
Breaking Changes - Use danger type for breaking changes

Performance Considerations

Avoid Dynamic Badges - Static badges perform better
Minimize CSS Overrides - Use CSS variables when possible
Optimize Images - If using icon badges, optimize icon files
Consider Bundle Size - Custom badge components add to bundle size

Examples

Documentation Site

markdown

# VitePress Documentation

## Getting Started <Badge type="tip" text="Recommended" />
## Configuration <Badge type="info" text="Updated" />
## Migration Guide <Badge type="warning" text="Important" />
## Legacy API <Badge type="danger" text="Deprecated" />

API Documentation

markdown

# REST API Reference <Badge type="info" text="v2.1" />

## Authentication

### POST /auth/login <Badge type="tip" text="New" />
### POST /auth/refresh <Badge type="info" text="Updated" />
### POST /auth/legacy <Badge type="warning" text="Deprecated" />

## User Management

### GET /users <Badge type="tip" text="Stable" />
### POST /users <Badge type="info" text="Beta" />
### DELETE /users/:id <Badge type="danger" text="Admin Only" />

Component Library

markdown

# Component Library <Badge type="info" text="v3.0" />

## Components

### Button <Badge type="tip" text="Stable" />
### Input <Badge type="tip" text="Stable" />
### Modal <Badge type="info" text="Beta" />
### DataTable <Badge type="warning" text="Experimental" />

Default Theme: Badge ​

Basic Usage ​

Simple Badge ​

Badge Types ​

Badge Configuration ​

Custom Text ​

Custom Colors ​

Advanced Usage ​

Badge with Links ​

Conditional Badges ​

Dynamic Badge Content ​

Styling Badges ​

CSS Customization ​

CSS Variables ​

Badge Patterns ​

Version Badges ​

Status Badges ​

Platform Badges ​

Permission Badges ​

Custom Badge Components ​

Enhanced Badge Component ​

Badge Group Component ​

Accessibility ​

Screen Reader Support ​

Semantic HTML ​

Best Practices ​

Usage Guidelines ​

Content Guidelines ​

Performance Considerations ​

Examples ​

Documentation Site ​

API Documentation ​

Component Library ​

Default Theme: Badge

Basic Usage

Simple Badge

Badge Types

Badge Configuration

Custom Text

Custom Colors

Advanced Usage

Badge with Links

Conditional Badges

Dynamic Badge Content

Styling Badges

CSS Customization

CSS Variables

Badge Patterns

Version Badges

Status Badges

Platform Badges

Permission Badges

Custom Badge Components

Enhanced Badge Component

Badge Group Component

Accessibility

Screen Reader Support

Semantic HTML

Best Practices

Usage Guidelines

Content Guidelines

Performance Considerations

Examples

Documentation Site

API Documentation

Component Library