Avatar | Sodium design system

Type

When to use it

Use: A row says who triggered a run, owns a pipeline or approved a change.
Use: A service did the work: the scheduler, a connector, a bot account (type="service").
Use: Several owners on one line (AvatarGroup).
Not for: A kind of thing, such as an engine or a region. Use Tag.
Not for: A logo of a third-party product; use its name in text.

7 rules

Never: Round an Avatar or its image. Because every corner in Sodium is square, and one round photo is the part everyone notices.
Must: Set type="service" for a machine account, so it shows the server glyph and never initials. Because initials on a scheduler make a machine read as a colleague in an audit trail.
Must: Pass name, or decorative when the name is written beside it. Because name gives the initials and the accessible name; without either, the avatar is an unnamed image.
Should: Set decorative when the person's name is the next text, so it is not read twice.
Must: Serve src from your own origin or a store you control. Because a third-party image tells that host who looked at the run, and fails closed behind a strict content policy.
Must: Give an AvatarGroup a label that says what the people share. Because the group is a list, and "list, 4 items" says nothing about why these four are together.
Should: Use sm in a 32px row, the default in a 40px row, lg in a header.

3 checks

: A named avatar is role="img" with its name; decorative ones are aria-hidden.
: Initials are ink on the well, 16.4:1 in light and 14.5:1 in dark; the service glyph text-2, 7.0:1.
: The +N cell reads "and 3 more" with the hidden names, and shows them on hover.

5 edge cases

6 props

7 tokens