# 徽章

风格化的徽章元素。

```jsx
<Flex gap="2">
  <Badge color="orange">进行中</Badge>

  <Badge color="blue">审核中</Badge>

  <Badge color="green">完成</Badge>
</Flex>
```

## [API 参考](#api-参考)

该组件基于 `span` 元素，并支持 [常见的边距属性](/themes/docs/overview/layout#margin-props)。

| Prop           | Type                                                 | Default          |
| -------------- | ---------------------------------------------------- | ---------------- |
| `asChild`      | `boolean`                                            | No default value |
| `size`         | `Responsive<"1" \| "2" \| "3">`                      | `"1"`            |
| `variant`      | `"solid" \| "soft" \| "surface" \| "outline"`        | `"soft"`         |
| `color`        | `enum`                                               | No default value |
| `highContrast` | `boolean`                                            | No default value |
| `radius`       | `"none" \| "small" \| "medium" \| "large" \| "full"` | No default value |

## [示例](#示例)

### [尺寸](#尺寸)

使用 `size` 属性来控制尺寸。

```jsx
<Flex align="center" gap="2">
  <Badge size="1" color="indigo">
    新
  </Badge>

  <Badge size="2" color="indigo">
    新
  </Badge>

  <Badge size="3" color="indigo">
    新
  </Badge>
</Flex>
```

### [变体](#变体)

使用 `variant` 属性来控制视觉样式。

```jsx
<Flex gap="2">
  <Badge variant="solid" color="indigo">
    新
  </Badge>

  <Badge variant="soft" color="indigo">
    新
  </Badge>

  <Badge variant="surface" color="indigo">
    新
  </Badge>

  <Badge variant="outline" color="indigo">
    新
  </Badge>
</Flex>
```

### [颜色](#颜色)

使用 `color` 属性来指定特定的 [颜色](/themes/docs/theme/color)。

```jsx
<Flex gap="2">
  <Badge color="indigo">新</Badge>

  <Badge color="cyan">新</Badge>

  <Badge color="orange">新</Badge>

  <Badge color="crimson">新</Badge>
</Flex>
```

### [高对比度](#高对比度)

使用 `highContrast` 属性来增加与背景的颜色对比。

```jsx
<Flex direction="column" gap="2">
  <Flex gap="2">
    <Badge color="gray" variant="solid">
      新
    </Badge>

    <Badge color="gray" variant="soft">
      新
    </Badge>

    <Badge color="gray" variant="surface">
      新
    </Badge>

    <Badge color="gray" variant="outline">
      新
    </Badge>
  </Flex>

  <Flex gap="2">
    <Badge color="gray" variant="solid" highContrast>
      新
    </Badge>

    <Badge color="gray" variant="soft" highContrast>
      新
    </Badge>

    <Badge color="gray" variant="surface" highContrast>
      新
    </Badge>

    <Badge color="gray" variant="outline" highContrast>
      新
    </Badge>
  </Flex>
</Flex>
```

### [半径](#半径)

使用 `radius` 属性来指定特定的半径值。

```jsx
<Flex gap="2">
  <Badge variant="solid" radius="none" color="indigo">
    新
  </Badge>

  <Badge variant="solid" radius="large" color="indigo">
    新
  </Badge>

  <Badge variant="solid" radius="full" color="indigo">
    新
  </Badge>
</Flex>
```

<!--$-->

<!--/$-->