> For AI agents: the complete documentation index is available at https://rspress.rs/zh/llms.txt, the full documentation bundle is available at https://rspress.rs/zh/llms-full.txt.

# Badge

Badge 组件用于显示一个小型的内联徽章。

## 使用方法

```mdx title="index.mdx"
import { Badge } from '@rspress/core/theme';

<Badge text="NEW" type="info" />
```

NEW
## 类型

Badge 组件支持四种类型，每种类型有不同的颜色：

```mdx preview title="index.mdx"
import { Badge } from '@rspress/core/theme';

<Badge text="tip" type="tip" />
<Badge text="info" type="info" />
<Badge text="warning" type="warning" />
<Badge text="danger" type="danger" />
```

## 轮廓样式

```mdx preview title="index.mdx"
import { Badge } from '@rspress/core/theme';

<Badge text="tip" type="tip" outline />
<Badge text="info" type="info" outline />
<Badge text="warning" type="warning" outline />
<Badge text="danger" type="danger" outline />
```

## 自定义内容

你可以使用 `children` 属性在徽章内渲染自定义内容：

```mdx preview title="index.mdx"
import { Badge, IconSearch, SvgWrapper } from '@rspress/core/theme';

<Badge type="tip">
  <img
    style={{ height: '18px' }}
    src="https://assets.rspack.rs/rspress/rspress-logo.svg"
  />
  <span>Rspress</span>
</Badge>

<Badge type="info">
  <SvgWrapper icon={IconSearch} />
  <span>搜索</span>
</Badge>
```

## 与文本内联

Badge 可以与文本内联使用：

```mdx preview title="index.mdx"
import { Badge } from '@rspress/core/theme';

与文本内联 <Badge text="New" />
```

## 在标题中使用

Badge 可以在标题中使用：

```mdx
##### H5 标题 <Badge text="Info" type="info" />

#### H4 标题 <Badge text="Warning" type="warning" />

### H3 标题 <Badge text="Danger" type="danger" />
```

##### H5 标题 Info
#### H4 标题 Warning
### H3 标题 Danger
## Props

```ts
interface BadgeProps {
  /**
   * 徽章内显示的内容。可以是字符串或 React 节点。
   */
  children?: React.ReactNode;
  /**
   * 徽章的类型，决定其颜色和样式。
   * @default 'tip'
   */
  type?: 'tip' | 'info' | 'warning' | 'danger';
  /**
   * 徽章内显示的文本内容（用于向后兼容）。
   */
  text?: string;
  /**
   * 是否使用轮廓样式显示徽章。
   * @default false
   */
  outline?: boolean;
}
```