Avatar

Initials or image avatar. Use tone for owner color; shared shows a users icon when initials are empty.

Size

3xs
2xs
sm
md

Tone × size

3xs
2xs
sm
md

Developer

import { Avatar } from "@financial-tracking/design-system"

API reference

PropTypeDefault
initialsRequired. One or two letters when there is no image.string—
labelRequired accessible name.string—
srcstring | null—
size"3xs" | "2xs" | "sm" | "md""md"
tone"neutral" | "scott" | "kristen" | "shared""neutral"