Components

Avatar

Circular identity mark — an image, or monogram initials on a neutral surface.

Preview

components/core/Avatar.jsx

MEMEME?

MEALGH

The monogram fallback keeps identity marks on-system — no random hue generation, just initials on a neutral surface.

Usage

src/components/ui/Avatar.tsx

tsx

import { Avatar } from "@/components/ui/Avatar";

<Avatar name="Mehmet Ergul" size={48} />
<Avatar src="/me.jpg" name="Mehmet Ergul" />

{/* Overlapping stack — ring separates neighbours: */}
<Avatar name="Mehmet Ergul" ring />

API

props

Prop	Type	Default	Description
src	string	—	Image URL. Without one, monogram initials are derived from name.
name	string	""	Person's name — feeds the initials, the title tooltip, and the image alt.
size	number	40	Diameter in px; the monogram scales with it.
ring	boolean	false	Page-colored ring for overlapping avatar stacks.

Tokens consumed

semantic only

--color-bg-hover--color-fg-muted--color-border--color-bg--font-sans--weight-semibold