Avatar
Photo or initials for one person. Not a status chip and not a button.
Master
Switch size and appearance to preview a photo or initials from the name.
Usage
Always pass name. src is optional: a missing or broken photo falls back to initials from the name. A person icon shows only if there are no initials either. See contracts/avatar.json for the full contract.
Do's
- User menus.
- Assignee in a table row.
- Comment authors.
- Profile headers.
Don'ts
- Do not invent a local Avatar.
- Do not use for status or category labels.
- Do not make Avatar clickable. Wrap it in a Button or link only with a new contract.
- Do not put a status dot or count on Avatar.
- Do not mix circle and square in the same list.
- Do not use for logos or brands. Use Logo.
- Do not use raw hex.
<Avatar name="Maya Chen" src="/faces/maya-chen.jpg" size="md" shape="circle" />