Avatar

Ein Avatar repräsentiert User visuell, per Image, Initials oder Icon.

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>

Best Practices

Wähle die passende Variante je nach Anwendungsfall. Ein Image eignet sich für personalisierte Elemente wie Benutzerprofile, ein Icon für wiederkehrende Inhalte.
Zeige Initialen, wenn kein passendes Image hinterlegt ist.
Überlass die Farbe meist dem enthaltenen Element. Setze über color nur dann eine feste Farbe, wenn sie die Unterscheidung verbessert.
Sorge dafür, dass die Bedeutung des Avatars aus dem Kontext hervorgeht.
Nutze bei mehreren Avataren nebeneinander einen AvatarStack.

Color

Initials erhalten automatisch eine der Colors, abhängig von ihrem Inhalt. Ein Icon erhält über den Avatar im Default die Color blue. Für eine gezielte Wahl kann das Property color verwendet werden.

Sizes

Status

Wird im Avatar das Property status gesetzt erhält der Avatar automatisch das passende Icon und die passende Farbe. 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.

Combine

Benutze die Combine-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>>`	-	A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup.
`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`	-

Components

Integrations