Avatar

People round with initials or a picture; organizations and projects at 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
Hides it from assistive technology when the same information is already written next to it.
kind
"person" | "org" = person
A person (round) or an organization (rounded square).
name
string
The person's or organization's name; its first letters show without a picture, and it is the accessible name.
size
24 | 20 | 28 | 32 | 40 = 24
The diameter in pixels.
src
string
The picture's address; without one, or when it fails to load, the letters show.