Avatar

Avatar renders a compact, circular identity token derived from a person or entity name. Use it in user menus, comment lists, tables, and anywhere a full profile image is unnecessary. It shows up to two uppercase initials on a bordered surface; when no name is supplied it renders an empty circle.

Initials

Initials come off the name: one word gives one letter, and only the first two words contribute — a third initial makes the circle unreadable at 32px. With no name at all the circle stays empty rather than showing a placeholder glyph that means nothing.

AL
C
JF

Sizes

Size is a class, not a prop — the circle takes whatever size-* the call site sets, and past size-12 the text needs a size of its own.

GH
GH
GH
GH

Stacked group

Negative spacing overlaps the circles and a ring in the page colour cuts each one out of the one behind it. Reach for it where a list of participants would cost more room than it's worth.

AL
GH
AT
+

With a name beside it

An avatar carries no information a reader can act on — paired with the name and role it identifies someone, which is the only reason to spend the space.

WS
Washington Silva Administrator

API

Prop Type Default Description
name string

Full name used to compute the initials. The first letter of the first two space-separated words is taken, uppercased, and capped at two characters.

src string

Image URL. When set, shown in place of the initials until it fails to load.

class string

Additional Tailwind classes merged onto the root. Use to override the default size (size-8), shape, or the fallback's bg-hover text-foreground colors (append ! to win over those defaults, e.g. bg-selected! text-selected-foreground!).