Avatar

import { Avatar } from "@/ui";

Avatar matches the Figma Avatar and Profile components. Figma splits them in two; in code they are one component with a type prop.

Types

The fill says who the person is. Use profile for the signed-in user, and admin or user when you list people by role.

<Avatar initials="AU" type="profile" />
<Avatar initials="AU" type="admin" />
<Avatar initials="AU" type="user" />

`type`	Fill	Token
`profile`	#E0EBFE	`--color-primary-100`
`admin`	#FCE9F4	`--color-tag-pink`
`user`	#E0FDFF	`--color-tag-blue`

Sizes

<Avatar initials="AU" size="lg" />
<Avatar initials="AU" size="sm" />

`size`	Circle	Text
`lg` (default)	40px	14px medium
`sm`	24px	12px regular

Figma sets the small avatar's initials at 10px. Code uses 12px, because 12px is the smallest text in the product.

States

Pass onClick and the avatar becomes a button: hovering turns the initials blue. active adds a 1px blue ring. Use it while the avatar's menu is open.

<Avatar initials="AU" name="Alex Underwood" active={open} onClick={toggleMenu} />

Figma state	In code
Rest	default
Hover	`:hover` when `onClick` is set
Active	`active`
Active hover	`active` plus `:hover`

In a list

Use sm beside a 14px name. The role goes in its own column as text, so the colour is never the only signal.

<Avatar initials="PS" name="Priya Shah" type="admin" size="sm" />

Props

Prop	Type	Default	Notes
`initials`	`string`	`""`	One or two letters. Shown in upper case.
`name`	`string`		Full name. Used as the tooltip and the accessible label.
`type`	`"profile" \| "admin" \| "user"`	`"profile"`	Sets the fill.
`size`	`"lg" \| "sm"`	`"lg"`	40px or 24px.
`active`	`boolean`	`false`	Blue ring. Also sets `aria-pressed` on a button.
`onClick`	`function`		Renders a `<button>` with hover and focus styles.
`className`	`string`	`""`	For layout only.

Not yet using Avatar

These places draw their own initials circle. Move them to Avatar when you next touch them:

UserProfile in the menu bar (.user-profile__avatar, 32px, which is not a Figma size).
settings/user-management/components/Avatar.jsx (20 to 32px, with five colours picked from the first letter, purple included).
my-profile/UserDetails.jsx.

Do and don't

Do pass name so screen readers and the tooltip get the full name.
Do pass onClick when the avatar opens something, so it is a real button.
Don't pick a fill by hashing the name. The fill means a role.
Don't add more sizes. Use 40px or 24px.

TypesCopy Anchor Link

SizesCopy Anchor Link

StatesCopy Anchor Link

In a listCopy Anchor Link

PropsCopy Anchor Link

Not yet using AvatarCopy Anchor Link

Do and don'tCopy Anchor Link