Avatar

Personen rund, mit Initialen oder Bild; Organisationen und Projekte mit Radius 8.

AAOAOAOAONNLNLNL

<div className="flex flex-wrap items-end gap-12">
      {([20, 24, 28, 32, 40] as const).map((s) => (
        <Avatar key={s} name="Ada Okafor" size={s} />
      ))}
      {([20, 24, 32, 40] as const).map((s) => (
        <Avatar key={`o${s}`} name="Northwind Labs" kind="org" size={s} />
      ))}
    </div>

import { Avatar, AvatarGroup } from "@logicplanes/kaeso-ui";

Props

decorative
boolean
Verbirgt es vor assistiven Technologien, wenn dieselbe Information schon daneben steht.
kind
"person" | "org" = person
Eine Person (rund) oder eine Organisation (abgerundetes Quadrat).
name
string
Der Name der Person oder Organisation; ohne Bild erscheinen seine Anfangsbuchstaben, und er ist der zugängliche Name.
size
24 | 20 | 28 | 32 | 40 = 24
Der Durchmesser in Pixeln.
src
string
Die Adresse des Bilds; ohne Bild oder wenn es nicht lädt, erscheinen die Buchstaben.