Version: latest

Universell einsetzbar

Avatar funktioniert sowohl auf dem Server als auch im Browser. Nutze immer den Standard-Import (z. B. @prokodo/ui/avatar) — die Library erkennt die Umgebung automatisch.

Avatar

Avatar rendert ein Profilbild mit automatischem Fallback auf Initialen, wenn kein Bild vorhanden ist. Unterstützt mehrere Formen und Größen.

Übersicht

import { Avatar } from '@prokodo/ui/avatar'

<Avatar src="/profile.jpg" alt="Jane Doe" size="md" />
<Avatar initials="JD" color="primary" size="lg" />

Live PreviewOpen in Storybook ↗

Import

import { Avatar } from "@prokodo/ui/avatar"

CSS:

import "@prokodo/ui/avatar.css"

Props

Prop	Typ	Standard	Pflicht	Beschreibung
`image`	`ImageProps`	—	—	Bildquellen-Props (src, alt, …).
`iconOverride`	`ReactNode`	—	—	Benutzerdefiniertes Icon-Element.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| number`	`"md"`	—	Avatar-Größen-Preset oder Pixel-Wert.
`color`	`Variants`	—	—	Hintergrundfarb-Variante.
`priority`	`boolean`	`false`	—	Bild sofort laden (LCP-Optimierung).
`redirect`	`LinkProps`	—	—	Avatar in einem Link einschließen.
`className`	`string`	—	—	CSS-Klasse am Root-Element.

Siehe src/components/avatar/Avatar.model.ts für den vollständigen AvatarProps-Typ.

Design-Tokens

Avatar definiert keine komponentenspezifischen CSS Custom Properties. Passe das Erscheinungsbild an, indem du folgende globale Design-System-Tokens auf :root oder einem übergeordneten Element überschreibst:

Token	Beschreibung
`--pk-shadow-sm`	Schatten des Avatar-Link-Containers
`--pk-color-fg`	Fallback-Icon-Farbe für `color="inherit"` — adaptiv im Dark Mode
`--pk-color-brand`	Hintergrundfarbe für `color="primary"`
`--pk-color-accent`	Hintergrundfarbe für `color="secondary"`
`--pk-color-muted`	Hintergrundfarbe für `color="info"`
`--pk-color-success`	Hintergrundfarbe für `color="success"`
`--pk-color-warning`	Hintergrundfarbe für `color="warning"`
`--pk-color-error`	Hintergrundfarbe für `color="error"`
`--pk-palette-white`	Hintergrundfarbe für `color="white"`

Dark Mode: Bei color="inherit" nutzt das Fallback-UserIcon var(--pk-color-fg), sodass es auf hellen und dunklen Hintergründen sichtbar bleibt.

WCAG-2.2-Status

Kriterium	Bezeichnung	Status	Hinweis
1.1.1	Nicht-Text-Inhalt (A)	🔍 Manuell prüfen	Alle Bilder, Icons und Medien benötigen eine Textalternative (alt, aria-label oder aria-labelledby). Rein dekorative Elemente müssen aria-hidden tragen.
1.4.3	Kontrast (Minimum) (AA)	🔍 Manuell prüfen	Text benötigt ein Kontrastverhältnis von mindestens 4,5:1 (3:1 für großen Text). Prüfung im finalen Produkt-Theme erforderlich.
1.4.5	Bilder von Text (AA)	🔍 Manuell prüfen	Text sollte als echter Text gerendert werden, nicht als Bild, außer wenn unvermeidbar (z. B. Logo, Markenzeichen).
1.4.11	Nicht-Text-Kontrast (AA)	🔍 Manuell prüfen	Ränder von UI-Komponenten und Icons müssen mindestens 3:1 Kontrast zu angrenzenden Farben aufweisen. Prüfung im Produkt-Theme erforderlich.
4.1.2	Name, Rolle, Wert (A)	🔍 Manuell prüfen	Name, Rolle und Zustand aller interaktiven UI-Komponenten müssen via nativer HTML-Semantik oder ARIA programmatisch bestimmbar sein.

Testabdeckung: 3 jest-axe-Assertion(s) in 4 Testdatei(en) · 0 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.

Storybook

👉 Avatar in Storybook öffnen

Quellcode

src/components/avatar/Avatar.model.ts