Avatar
Overview
Usage
Examples
API
An avatar is a compact, circular representation of a person or entity. <rhombus-avatar> renders the src image when given (with name as its alt) and otherwise falls back to initials derived from name. It is bespoke — no Material primitive — and adds no new tokens.
Example
When to use
- Use an avatar to identify a user or entity beside their name — in a comment, a list row, a header. It is decorative shorthand, not a control.
- When you have a photo, pass
src; otherwise let the initials fallback carry the identity. Match itssizeto the surrounding density.
When not to use
- For a small status or count next to a label, use a Badge — it is built for counts and statuses, not identity.
- For a clickable, labelled tag or person token that can be removed, use a Chip.
- For a tappable identity entry point in a header or shell, place the avatar inside a Button rather than making the avatar itself the control.
Related components
Was this page helpful?