# 头像

个人头像、用户首字母或备用图标。

```jsx
<Flex gap="2">
  <Avatar
    src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
    fallback="A"
  />

  <Avatar fallback="A" />
</Flex>
```

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

此组件继承自 [Avatar 原始组件](/primitives/docs/components/avatar)。

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

## [示例](#示例)

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

使用 `size` 属性来控制头像的大小。

```jsx
<Flex align="center" gap="4">
  <Avatar
    size="1"
    src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
    fallback="A"
  />

  <Avatar
    size="2"
    src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
    fallback="A"
  />

  <Avatar
    size="3"
    src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
    fallback="A"
  />

  <Avatar
    size="4"
    src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
    fallback="A"
  />

  <Avatar
    size="5"
    src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
    fallback="A"
  />

  <Avatar
    size="6"
    src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
    fallback="A"
  />

  <Avatar
    size="7"
    src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
    fallback="A"
  />

  <Avatar
    size="8"
    src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
    fallback="A"
  />
</Flex>
```

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

使用 `variant` 属性来控制头像的视觉风格。

```jsx
<Flex gap="2">
  <Avatar variant="solid" fallback="A" />

  <Avatar variant="soft" fallback="A" />
</Flex>
```

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

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

```jsx
<Flex gap="2">
  <Avatar variant="solid" color="indigo" fallback="A" />

  <Avatar variant="solid" color="cyan" fallback="A" />

  <Avatar variant="solid" color="orange" fallback="A" />

  <Avatar variant="solid" color="crimson" fallback="A" />
</Flex>
```

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

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

```jsx
<Grid rows="2" gap="2" display="inline-grid" flow="column">
  <Avatar variant="solid" color="indigo" fallback="A" />

  <Avatar variant="solid" color="indigo" fallback="A" highContrast />

  <Avatar variant="solid" color="cyan" fallback="A" />

  <Avatar variant="solid" color="cyan" fallback="A" highContrast />

  <Avatar variant="solid" color="orange" fallback="A" />

  <Avatar variant="solid" color="orange" fallback="A" highContrast />

  <Avatar variant="solid" color="crimson" fallback="A" />

  <Avatar variant="solid" color="crimson" fallback="A" highContrast />

  <Avatar variant="solid" color="gray" fallback="A" />

  <Avatar variant="solid" color="gray" fallback="A" highContrast />
</Grid>
```

### [边角](#边角)

使用 `radius` 属性来指派特定的边角值。

```jsx
<Flex gap="2">
  <Avatar radius="none" fallback="A" />

  <Avatar radius="large" fallback="A" />

  <Avatar radius="full" fallback="A" />
</Flex>
```

### [备用](#备用)

使用 `fallback` 属性来修改呈现的备用元素。

```jsx
<Flex gap="2">
  <Avatar fallback="A" />

  <Avatar fallback="AB" />

  <Avatar
    fallback={
      <Box width="24px" height="24px">
        <svg viewBox="0 0 64 64" fill="currentColor">
          <path d="M41.5 14c4.687 0 8.5 4.038 8.5 9s-3.813 9-8.5 9S33 27.962 33 23 36.813 14 41.5 14zM56.289 43.609C57.254 46.21 55.3 49 52.506 49c-2.759 0-11.035 0-11.035 0 .689-5.371-4.525-10.747-8.541-13.03 2.388-1.171 5.149-1.834 8.07-1.834C48.044 34.136 54.187 37.944 56.289 43.609zM37.289 46.609C38.254 49.21 36.3 52 33.506 52c-5.753 0-17.259 0-23.012 0-2.782 0-4.753-2.779-3.783-5.392 2.102-5.665 8.245-9.472 15.289-9.472S35.187 40.944 37.289 46.609zM21.5 17c4.687 0 8.5 4.038 8.5 9s-3.813 9-8.5 9S13 30.962 13 26 16.813 17 21.5 17z" />
        </svg>
      </Box>
    }
  />
</Flex>
```

<!--$-->

<!--/$-->