Avatar

Ein Avatar dient der visuellen Repräsentation von Usern oder anderen Inhalten, etwa durch ein Image, Initials oder ein Icon.

GitHub Markdown

Grundlagen

Ein Avatar ist ein kleiner, runder Container, der ein Image, Initialen oder ein Icon enthalten kann. Avatare haben eine stark visuelle, unterstützende Funktion, da sie Inhalte auf anschauliche Weise repräsentieren. Besonders Avatare mit Images verleihen Benutzeroberflächen eine persönlichere Note: User können ein individuelles Bild wählen (z. B. ein Profil- oder Projektbild), wodurch die Benutzeroberfläche persönlicher und vertrauenswürdiger wirkt. Gleichzeitig erleichtert das visuelle Feedback anderen Usern den Aufbau einer mentalen Verbindung zu einem Profil.

Best Practices

Achte bei der Verwendung eines Avatars darauf, dass ...

je nach Anwendungsfall die passende Variante gewählt wird. Ein Avatar mit Image eignet sich besonders für personalisierte Elemente wie Benutzerprofile oder Projektbilder. Ein Avatar mit Icon passt besser zu wiederkehrenden Inhalten, die zum Beispiel in Lists aufgezählt werden können.
wenn kein passendes Image im Avatar hinterlegt ist, Initialen verwendet werden. So bleibt die visuelle Orientierung auch ohne Bild erhalten.
die Color-wahl sinnvoll getroffen wird. In der Regel bestimmt das enthaltene Element (z. B. Icon oder Initialen) die Color automatisch. In bestimmten Fällen kann es jedoch sinnvoll sein, eine feste Color zu definieren – z. B. zur besseren Unterscheidung.
aus dem Benutzeroberflächen-Kontext klar hervorgeht, welche Bedeutung der Avatar hat.
wenn mehrere Avatare nebeneinander dargestellt werden sollen, ein AvatarStack verwendet wird, um die Darstellung kompakt und übersichtlich zu halten.

Verwendung

Verwende einen Avatar, um ...

einem übergeordneten Element eine visuelle Identität zu geben. Zum Beispiel, um Einträge in einer List besser unterscheidbar zu machen.
dem User Möglichkeiten zur Personalisierung zu bieten. Zum Beispiel um Benutzerprofilbilder hochzuladen oder Projekte eine visuelle Erscheinung zu geben.
die visuelle Orientierung zu unterstützen. Zum Beispiel in einer Bestellübersicht, in der ein Avatar mit Icon anzeigt, um welche Zahlungsmethode es sich handelt.

Playground

Der <Avatar /> kann mit drei verschiedenen Components befüllt werden: <Image />, <Icon /> oder <Initials />.

import {
  Avatar,
  Image,
} from "@mittwald/flow-react-components";

<Avatar>
  <Image
    alt="Gopher"
    src="https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544"
  />
</Avatar>

Color

Die Color bei der Kombination mit Icon oder Initials richtet sich jeweils nach dem übergebenen Child der Component. Für eine gezielte Wahl der Color kann das Property color verwendet werden.

Folgende dekorative Colors stehen zur Verfügung: Blue, Violet, Teal, Lilac und Green.

Sizes

Der Avatar unterstützt die Sizes Extra Small, Small, Medium oder Large.

Status

Wird im Avatar das Property status gesetzt erhält der Avatar automatisch das passende Icon und die passende Color. Dieses Property darf nur verwendet werden, wenn der Status zusätzlich durch ein benachbartes Element (z. B. Text oder Label) eindeutig kommuniziert wird.

Benachrichtigungen

Hier wird der Status durch den Inhalt der Benachrichtigung erklärt, daher kann der Status Avatar verwendet werden.

E-Mail-Adressen

Hier muss der Status durch das AlertBadge erklärt werden, der Status Avatar kann daher nicht verwendet werden.

Kombiniere mit ...

Image

Im folgenden Code-Beispiel wird ein Avatar mit einem Image kombiniert. Wenn kein Image vorhanden ist, sollten Initials angezeigt werden.

Die Initials werden automatisch aus dem Text generiert, der innerhalb von <Initials /> übergeben wird. Sie dienen ausschließlich als Platzhalter für ein Image.

Icon

Ein Avatar lässt sich mit einem beliebigen Icon kombinieren.

Align

Benutze die Align-Component, um Text neben dem Avatar zu platzieren.

Max MustermannOrganisationsinhaber

Properties

Property	Type	Default	Description
`size`	`"s" \| "xs" \| "m" \| "l"`	"m"	The size of the avatar.
`color`	`"violet" \| "green" \| "blue" \| "teal" \| "lilac"`	-	The color of icons and initials inside the avatar.
`status`	`"info" \| "success" \| "warning" \| "danger" \| "unavailable"`	-	Adds status icon and color to the avatar. May only be used if the status is explained by an element (like text or label) nearby.
`label`	`string`	-	A descriptive label that assistive technology announces for the avatar (e.g. the name of the represented person or entity). When set, the avatar is exposed as a single image with this label. When omitted, the avatar is treated as purely decorative and hidden from assistive technology.
`children`	`ReactNode`	-
`className`	`string`	-	The elements class name.
`wrapWith`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	-
`ref`	`Ref<HTMLSpanElement>`	-	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see React Docs
`key`	`Key`	-