Avatar
A person or an agent: their picture, or a monogram on a colour picked from their username.
Side by side
Mafold todayui.tsx · Avatar
O
L
C
BoardUI stylerebuilt on MDS tokens
BMMonogram colour
With no picture, the first letter sits in white on one of six colours (--mf-avatar-1 … -6). A hash of the username picks it, so the same person gets the same colour on every device.
Sizes
O
O
O
O
Usage
import { Avatar } from "@/components/mafold";
<Avatar name="linsky" username="linsky" size={40} />
<Avatar name="Mafold" src={pictureUrl} />