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

Name:type

Optional

Type:'info' | 'tip' | 'warning' | 'danger' | string

Default:'tip'

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

Name:text

Optional

Type:string

Default:''

Badge text content.

Name:color

Optional

Type:string

Custom badge text color.

Name:bgColor

Optional

Type:string

Custom badge background color.

Name:borderColor

Optional

Type:string

Default:'transparent'

Custom badge border color.

Slots

default

The component provides a default slot whose content takes precedence over the text prop. Use it to place icons or rich content:

<Badge type="tip">
  <VPIcon provider="iconify" name="carbon:warning" />
  Note
</Badge>

Without slot content, the component falls back to rendering the text prop:

<!-- equivalent to the above -->
<Badge type="tip" text="Note" />

Tips

Slot content is wrapped as-is inside the badge. For long text, prefer custom color / bgColor over relying on truncated styles.

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

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

10/13/26, 3:56 PM

View All Changelog

• e4dae-docs: improve docs (#1071)on 10/13/26
• 60619-docs: improve docs (#1069)on 10/11/26
• 7a454-feat(plugin-md-power): drop optional tag in field container (#987)on 9/12/26
• 1d04d-feat: add builtin auto-import-components (#932)on 9/9/26
• 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

Edit this page

Previous pageLLMs txt

Next pageIcon