Avatar
StableA round picture that shows who wrote a message: a letter for a person, a dark circle with a lime spark for the assistant.
Also known as profile picture, user image, persona
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
User and assistant
<div className="flex items-center gap-3">
<Avatar kind="user" name="Lokesh" />
<Avatar kind="ai" />
</div>The kind picks the look. The name only matters for a person.
When to use it
Shows who wrote a message. A person gets the first letter of their name; the assistant gets a dark circle with a lime spark, so its turns are easy to spot at a glance.
Made of: Circle · Letter or sparkle
Use it for
- Beside each assistant reply in a conversation.
- Next to a person's name in a list or a header.
- In tight rows such as a chat list: use the small size.
Not for
- Several people shown together: use AvatarStack.
- Showing a status or that something needs a person: use AttentionDot.
- Showing whether a voice assistant is listening or speaking: use AIPresence.
Do and avoid
Do
- Use the person's real name so the letter and the screen reader name are right.
- Use small in tight lists and medium beside messages.
- Use the assistant style wherever the assistant speaks, so people recognise it.
- Keep the fixed sizes so avatars stay round.
Avoid
- Do not use lime for a person. A lime spark on a circle is only for the assistant.
- Do not expect a full name to show. Only the first letter appears.
- Do not use Avatar to show status. Use AttentionDot or Badge.
- Do not change the colors of the assistant avatar.
On a phone
- Avatar is a fixed 24px or 32px circle and does not change on a phone.
- It is not a control. If it opens a profile or menu, wrap it in a button, which gets a 44px target on touch screens.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| kindrequired | "user" | "ai" | none | Selects the person or assistant treatment. |
| name | string | "You" | Used for the initial and for the accessible name of a user avatar. Ignored when kind is "ai". |
| size | "sm" | "md" | "md" | 24px (sm) or 32px (md). |
| className | string | none | Merged after the base classes. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one Avatar switches all of this from its properties panel, across 4 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Kind | kind | User, AI |
| Size | size | SM, MD |
Tokens
Change one of these and every part that uses it follows.
--code--lime--border--border-strong--surface-sunken--fg-muted--font-serif
Built in
- Screen readers read it as an image named "Assistant" or the person's name.
- The letter and the sparkle are part of that image, so they are not read out on their own.
- It cannot be pressed, and the Tab key skips it.
What you need to do
- Pass the person's real name, so the letter and the spoken name are right. Without it, screen readers hear "You".
- Wrap it in a button or link yourself if it should open something.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide