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:

   /* 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

Contributors

pengzhanbo小沐沐吖

Changelog

10/9/25, 7:46 AM

View All Changelog

• 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