111 lines
2.5 KiB
Markdown
111 lines
2.5 KiB
Markdown
---
|
|
title: Badge
|
|
icon: iconamoon:badge-light
|
|
createTime: 2025/10/08 22:45:50
|
|
permalink: /en/guide/components/badge/
|
|
---
|
|
|
|
## Overview <Badge type="tip" text="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
|
|
|
|
:::: field-group
|
|
|
|
::: field name="type" type="'info' | 'tip' | 'warning' | 'danger' | string" default="'tip'" optional
|
|
Badge type. Different types use different color schemes. Custom types are supported.
|
|
:::
|
|
|
|
::: field name="text" type="string" default="''" optional
|
|
Badge text content.
|
|
:::
|
|
|
|
::: field name="color" type="string" optional
|
|
Custom badge text color.
|
|
:::
|
|
|
|
::: field name="bgColor" type="string" optional
|
|
Custom badge background color.
|
|
:::
|
|
|
|
::: field name="borderColor" type="string" optional
|
|
Custom badge border color.
|
|
:::
|
|
|
|
::::
|
|
|
|
## Examples
|
|
|
|
**Input:**
|
|
|
|
```md :no-line-numbers
|
|
- 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 - <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)" />
|
|
|
|
Using custom `type` enables richer visual presentations.
|
|
|
|
**Input:**
|
|
|
|
1. Add predefined styles in the theme's [custom style file](../custom/style.md.md):
|
|
|
|
```css
|
|
/* 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`:
|
|
|
|
```md :no-line-numbers
|
|
VuePress - <Badge type="important" text="v2" />
|
|
```
|
|
|
|
**Output:**
|
|
|
|
VuePress - <Badge type="important" text="v2" />
|
|
|
|
<style>
|
|
/* 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;
|
|
}
|
|
</style>
|