---
title: "Avatar"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Avatar with image, initials, and icon variants. Supports stacked groups, status indicators, and multiple sizes—zero JavaScript required."
url: https://frutjam.com/zh-hant/components/avatar
---

# Avatar Component

 Avatar 元件在一個緊湊的、可自訂的容器中顯示使用者個人資料圖像或姓名首字母。頭像使用 Frutjam 的 CSS 自訂屬性構建，代表介面上的使用者、貢獻者或團隊成員。頭像系統支援圖像和文字、多種尺寸、顏色、形狀、狀態指示器、環和群組排列，非常適合使用者清單、評論、團隊顯示、個人資料部分和訊息傳遞介面。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

| 班級                    | 類型  | 描述             |
| --------------------- | --- | -------------- |
| avatar                | 根據  | 帶有縮寫或圖像的圓形頭像容器 |
| avatar-group          | 修飾符 | 多個頭像重疊堆疊       |
| avatar-ring           | 修飾符 | 在頭像周圍添加彩色環形邊框  |
| avatar-circle         | 風格  | 全圓形（預設）        |
| avatar-rounded        | 風格  | 圓角矩形形狀         |
| avatar-square         | 風格  | 方形，無圓角         |
| avatar-online         | 風格  | 綠色在線狀態指示燈      |
| avatar-away           | 風格  | 黃色離開狀態指示燈      |
| avatar-busy           | 風格  | 紅色忙狀態指示燈       |
| avatar-offline        | 風格  | 灰色離線狀態指示燈      |
| avatar-xs             | 尺寸  | 特小號            |
| avatar-sm             | 尺寸  | 小的             |
| avatar-md             | 尺寸  | 中（預設）          |
| avatar-lg             | 尺寸  | 大的             |
| avatar-xl             | 尺寸  | 特大號            |
| avatar-2xl            | 尺寸  | 2x 超大號         |
| avatar-primary        | 顏色  | 主要主題顏色         |
| avatar-secondary      | 顏色  | 次要主題色          |
| avatar-accent         | 顏色  | 強調主題顏色         |
| avatar-neutral        | 顏色  | 中性主題色          |
| avatar-info           | 顏色  | 訊息語意顏色         |
| avatar-success        | 顏色  | 成功語意色          |
| avatar-warning        | 顏色  | 警告語意顏色         |
| avatar-error          | 顏色  | 錯誤語意顏色         |
| avatar-ring-primary   | 顏色  | 原色戒指           |
| avatar-ring-secondary | 顏色  | 輔助色戒指          |
| avatar-ring-accent    | 顏色  | 戒指採用強調色        |
| avatar-ring-neutral   | 顏色  | 中性色戒指          |
| avatar-ring-info      | 顏色  | 訊息顏色的戒指        |
| avatar-ring-success   | 顏色  | 成功色戒指          |
| avatar-ring-warning   | 顏色  | 警告色環           |
| avatar-ring-error     | 顏色  | 戒指顏色錯誤         |

## 基本用法

使用文字縮寫或顏色建立簡單的頭像。

## 頭像與影像

透過自動影像調整和響應式尺寸調整來顯示使用者個人資料照片。

```html
<div class="avatar avatar-sm">
  <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=32&height=32&face_crop=true" alt="Strawbery" loading="lazy" />
</div>

<div class="avatar avatar-md">
  <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=40&height=40&face_crop=true" alt="Strawbery" loading="lazy" />
</div>

<div class="avatar avatar-lg">
  <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=56&height=56&face_crop=true" alt="Strawbery" loading="lazy" />
</div>
```

## 頭像尺寸

使用尺寸變體將頭像從超小 (xs) 縮放到 2 倍大 (2xl)，以適應不同的環境。

```html
<div class="avatar avatar-xs avatar-primary">XS</div>
<div class="avatar avatar-sm avatar-secondary">SM</div>
<div class="avatar avatar-md avatar-accent">MD</div>
<div class="avatar avatar-lg avatar-primary">LG</div>
<div class="avatar avatar-xl avatar-secondary">XL</div>
<div class="avatar avatar-2xl avatar-accent">2XL</div>
```

## 頭像顏色

不使用圖像時，應用顏色變體以按角色、團隊或狀態區分化身。

```html
<div class="avatar avatar-md avatar-primary">A</div>
<div class="avatar avatar-md avatar-secondary">B</div>
<div class="avatar avatar-md avatar-accent">C</div>
<div class="avatar avatar-md avatar-info">D</div>
<div class="avatar avatar-md avatar-neutral">E</div>
<div class="avatar avatar-md avatar-success">F</div>
<div class="avatar avatar-md avatar-warning">G</div>
<div class="avatar avatar-md avatar-error">H</div>
```

## 頭像形狀

選擇圓形（預設）、圓形或方形形狀以符合您的設計系統。

```html
<div class="avatar avatar-lg avatar-circle avatar-primary">●</div>
<div class="avatar avatar-lg avatar-rounded avatar-secondary">◇</div>
<div class="avatar avatar-lg avatar-square avatar-accent">■</div>
```

## 帶有姓名縮寫的頭像

顯示使用者姓名縮寫，以便在清單、評論線程和團隊部分中快速識別。

```html
<div class="avatar avatar-sm avatar-primary">JD</div>
<div class="avatar avatar-md avatar-secondary">AR</div>
<div class="avatar avatar-lg avatar-accent">MS</div>
<div class="avatar avatar-xl avatar-info">KL</div>
```

## 帶有狀態指示器的頭像

將頭像與狀態徽章結合，以顯示使用者的狀態或可用性（線上、離線、忙碌、離開）。

```html
<div class="avatar avatar-md avatar-online avatar-primary">JD</div>

<div class="avatar avatar-md avatar-offline avatar-secondary">AR</div>

<div class="avatar avatar-md avatar-busy avatar-accent">MS</div>

<div class="avatar avatar-md avatar-away avatar-info">KL</div>
```

## 帶有環形邊框的頭像

在頭像周圍添加裝飾環以強調、突出地位或視覺分隔。

```html
<div class="avatar avatar-md avatar-ring avatar-ring-primary avatar-primary">A</div>
<div class="avatar avatar-lg avatar-ring avatar-ring-secondary avatar-secondary">B</div>
<div class="avatar avatar-xl avatar-ring avatar-ring-accent avatar-accent">C</div>
```

### 戒指顏色變體

選擇獨立於頭像背景顏色的戒指顏色。

```html
<div class="avatar avatar-md avatar-ring avatar-ring-primary avatar-primary">A</div>
<div class="avatar avatar-md avatar-ring avatar-ring-secondary avatar-secondary">B</div>
<div class="avatar avatar-md avatar-ring avatar-ring-accent avatar-accent">C</div>
<div class="avatar avatar-md avatar-ring avatar-ring-info avatar-info">D</div>
<div class="avatar avatar-md avatar-ring avatar-ring-success avatar-success">E</div>
<div class="avatar avatar-md avatar-ring avatar-ring-warning avatar-warning">F</div>
<div class="avatar avatar-md avatar-ring avatar-ring-error avatar-error">G</div>
```

## 阿凡達集團

使用自動負邊距堆疊多個頭像，以重疊顯示團隊成員和協作者。

```html
<div class="avatar-group">
  <div class="avatar avatar-md avatar-primary">A</div>
  <div class="avatar avatar-md avatar-secondary">B</div>
  <div class="avatar avatar-md avatar-accent">C</div>
  <div class="avatar avatar-md avatar-info">D</div>
</div>
```

### 不同大小的頭像組

將多個尺寸組合到一個群組中以實現視覺層次結構。

```html
<div class="avatar-group">
  <div class="avatar avatar-sm avatar-primary">A</div>
  <div class="avatar avatar-md avatar-secondary">B</div>
  <div class="avatar avatar-lg avatar-accent">C</div>
</div>
```

### 具有狀態的頭像組

顯示團隊群組中每位成員的空閒狀態。

```html
<div class="avatar-group">
  <div class="avatar avatar-md avatar-online avatar-primary">A</div>
  <div class="avatar avatar-md avatar-offline avatar-secondary">B</div>
  <div class="avatar avatar-md avatar-busy avatar-accent">C</div>
</div>
```

## 組合變體

混合並匹配尺寸、顏色、形狀、狀態和戒指修飾符，以實現複雜的頭像顯示。

```html
<div class="avatar avatar-xl avatar-rounded avatar-ring avatar-ring-success avatar-success avatar-online">SK</div>

<div class="avatar avatar-lg avatar-square avatar-ring avatar-ring-primary avatar-primary">AB</div>

<div class="avatar avatar-2xl avatar-circle avatar-ring avatar-ring-error avatar-error avatar-busy">MR</div>
```