---
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/pl/components/avatar
---

# Avatar Component

 Komponenty awatara wyświetlają obrazy profili użytkowników lub inicjały w kompaktowym, konfigurowalnym pojemniku. Zbudowane na podstawie niestandardowych właściwości CSS Frutjam, awatary reprezentują użytkowników, współpracowników lub członków zespołu w całym interfejsie. System awatarów obsługuje obrazy i tekst, wiele rozmiarów, kolorów, kształtów, wskaźników stanu, pierścieni i układów grupowych — idealnie nadaje się do list użytkowników, komentarzy, ekranów zespołów, sekcji profili i interfejsów wiadomości.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

| Klasa                 | Typ         | Opis                                                |
| --------------------- | ----------- | --------------------------------------------------- |
| avatar                | Opierać     | Okrągły pojemnik na awatar z inicjałami lub obrazem |
| avatar-group          | Modyfikator | Nakładający się stos wielu awatarów                 |
| avatar-ring           | Modyfikator | Dodaje kolorową ramkę wokół awatara                 |
| avatar-circle         | Styl        | Całkowicie okrągły kształt (domyślnie)              |
| avatar-rounded        | Styl        | Zaokrąglony kształt prostokąta                      |
| avatar-square         | Styl        | Kwadratowy kształt bez zaokrągleń                   |
| avatar-online         | Styl        | Zielony wskaźnik stanu online                       |
| avatar-away           | Styl        | Żółty wskaźnik stanu nieobecności                   |
| avatar-busy           | Styl        | Czerwony wskaźnik stanu zajętości                   |
| avatar-offline        | Styl        | Szary wskaźnik stanu offline                        |
| avatar-xs             | Rozmiar     | Bardzo mały                                         |
| avatar-sm             | Rozmiar     | Mały                                                |
| avatar-md             | Rozmiar     | Średni (domyślny)                                   |
| avatar-lg             | Rozmiar     | Duży                                                |
| avatar-xl             | Rozmiar     | Bardzo duży                                         |
| avatar-2xl            | Rozmiar     | 2x bardzo duży                                      |
| avatar-primary        | Kolor       | Podstawowy kolor motywu                             |
| avatar-secondary      | Kolor       | Kolor motywu drugorzędnego                          |
| avatar-accent         | Kolor       | Kolor motywu akcentującego                          |
| avatar-neutral        | Kolor       | Neutralny kolor motywu                              |
| avatar-info           | Kolor       | Kolor semantyczny informacji                        |
| avatar-success        | Kolor       | Sukces semantyczny kolor                            |
| avatar-warning        | Kolor       | Ostrzeżenie kolor semantyczny                       |
| avatar-error          | Kolor       | Błąd koloru semantycznego                           |
| avatar-ring-primary   | Kolor       | Pierścionek w kolorze podstawowym                   |
| avatar-ring-secondary | Kolor       | Pierścionek w kolorze wtórnym                       |
| avatar-ring-accent    | Kolor       | Pierścionek w akcentującym kolorze                  |
| avatar-ring-neutral   | Kolor       | Pierścionek w neutralnym kolorze                    |
| avatar-ring-info      | Kolor       | Pierścionek w kolorze informacyjnym                 |
| avatar-ring-success   | Kolor       | Pierścionek w kolorze sukcesu                       |
| avatar-ring-warning   | Kolor       | Pierścień w kolorze ostrzegawczym                   |
| avatar-ring-error     | Kolor       | Pierścień w kolorze błędu                           |

## Podstawowe użycie

Twórz proste awatary za pomocą inicjałów tekstowych lub kolorów.

## Awatar z obrazami

Wyświetlaj zdjęcia profilowe użytkowników z automatycznym dopasowywaniem obrazu i responsywnym rozmiarem.

```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>
```

## Rozmiary awatarów

Użyj wariantów rozmiaru, aby skalować awatary od bardzo małych (xs) do 2x dużych (2xl) dla różnych kontekstów.

```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>
```

## Kolory awatara

Zastosuj warianty kolorów, aby rozróżnić awatary według roli, zespołu lub statusu, gdy nie używasz obrazów.

```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>
```

## Kształty awatarów

Wybieraj spośród okrągłych (domyślnych), zaokrąglonych lub kwadratowych kształtów, aby dopasować je do swojego systemu projektowania.

```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>
```

## Awatar z inicjałami

Wyświetlaj inicjały użytkowników w celu szybkiej identyfikacji na listach, wątkach komentarzy i sekcjach zespołu.

```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>
```

## Awatar ze wskaźnikiem stanu

Połącz awatary z plakietkami stanu, aby pokazać obecność lub dostępność użytkownika (online, offline, zajęty, nieobecny).

```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>
```

## Awatar z obramowaniem pierścienia

Dodaj dekoracyjne pierścienie wokół awatarów, aby podkreślić, podkreślić status lub wizualnie oddzielić.

```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>
```

### Warianty kolorów pierścionka

Wybierz kolory pierścieni niezależnie od kolorów tła awatara.

```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>
```

## Grupa Awatarów

Układaj wiele awatarów z automatycznym marginesem ujemnym w celu nakładania się wyświetlania członków zespołu i współpracowników.

```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>
```

### Grupa awatarów o różnych rozmiarach

Połącz wiele rozmiarów w grupie, aby uzyskać hierarchię wizualną.

```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>
```

### Grupa awatarów ze statusem

Pokaż stan dostępności dla każdego członka w grupie zespołu.

```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>
```

## Połączone warianty

Mieszaj i dopasowuj rozmiar, kolor, kształt, status i modyfikatory pierścieniowe, aby uzyskać złożone wyświetlanie awatarów.

```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>
```