Overview badge

Use the <Badge> component to display inline information such as status or labels.

Pass the content you want to display to the text prop of the <Badge> component.

Props

typeOptional'info' | 'tip' | 'warning' | 'danger' | string

'tip'

Badge type. Different types use different color schemes. Custom types are supported.

textOptionalstring

''

Badge text content.

colorOptionalstring

Custom badge text color.

bgColorOptionalstring

Custom badge background color.

borderColorOptionalstring

Custom badge border color.

Examples

Input:

- VuePress - <Badge type="info" text="v2" />
- VuePress - <Badge type="tip" text="v2" />
- VuePress - <Badge type="warning" text="v2" />
- VuePress - <Badge type="danger" text="v2" />
- VuePress - <Badge text="v2" color="#8e5cd9" bg-color="rgba(159, 122, 234, 0.16)" />

Output:

• VuePress - v2
• VuePress - v2
• VuePress - v2
• VuePress - v2
• VuePress - v2

Using custom type enables richer visual presentations.

Input:

1. Add predefined styles in the theme's custom style file(Open in new window):

   /* Light theme */
   .vp-badge.important {
     color: #8e5cd9;
     background-color: rgba(159, 122, 234, 0.14);
     border-color: transparent;
   }
   
   /* Dark theme */
   [data-theme="dark"] .vp-badge.important {
     color: #8e5cd9;
     background-color: rgba(159, 122, 234, 0.16);
     border-color: transparent;
   }
   
   /**
   'important' is a custom type
   */

2. Use the custom type:

   VuePress - <Badge type="important" text="v2" />

   Output:

   VuePress - v2

Use Cases

The <Badge> component has several common use cases in practical documentation writing. The following examples demonstrate some typical scenarios.

Status Indicators

In feature lists or descriptions, use <Badge> to mark recommended, new, or important features to help readers quickly identify key information.

Input:

- Article Encryption <Badge type="tip" text="Recommended" />
- Full-site Encryption <Badge type="info" text="New" />
- Comment System <Badge type="danger" text="Important" />

Output:

• Article Encryption Recommended
• Full-site Encryption New
• Comment System Important

Version Markers

In API documentation or feature descriptions, use <Badge> to mark the minimum version required for a feature, making it easy for readers to determine compatibility.

Input:

- `sidebarCollapsed` option <Badge type="info" text="v1.0.0-rc.143 +" />
- Collection Configuration <Badge type="warning" text="v1.0.0-rc.120 +" />

Output:

• sidebarCollapsed option v1.0.0-rc.143 +
• Collection Configuration v1.0.0-rc.120 +

Category Tags

In documentation section headings, use <Badge> to mark experimental or deprecated features, alerting readers to risks before use.

Input:

## Custom Section Type <Badge type="warning" text="Experimental" />

## Legacy Configuration <Badge type="danger" text="Deprecated" />

Output:

• Custom Section Type Experimental
• Legacy Configuration Deprecated

Contributors

pengzhanbo小沐沐吖

Changelog

7/15/26, 1:40 PM

View All Changelog

• 0daf2-docs: improve docs (#929)on 7/15/26
• 16c2d-docs: update field containeron 6/8/26
• 38505-docs: update en docs (#708)on 10/9/25
• 4d236-feat(theme)!: add collections support (#704)on 10/7/25
• d1496-docs: update docson 4/30/25
• 0fd6c-refactor(theme): improve types and flat config (#524)on 3/15/25
• 06752-docs: update <Badge /> detailson 2/8/25
• a2282-feat(theme): add custom color support for badge components, close #453 (#455)on 2/7/25
• e3b1c-docs: improve docson 8/18/24

Edit this page

Previous pageLLMs txt

Next pageIcon