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

Contributors

pengzhanbo小沐沐吖

Changelog

6/8/26, 6:40 PM

View All Changelog

• 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