Avatar
A person's photo or initials, an agent's robot or a team's icon.
<mm-avatar name="Jane Doe"></mm-avatar>
<mm-avatar name="support-triage-agent" kind="agent"></mm-avatar>
<mm-avatar name="Analytics Engineering" kind="team" size="32"></mm-avatar>
<mm-avatar-stack label="Owners" max="3">
<mm-avatar name="Jane Doe"></mm-avatar>
<mm-avatar name="Dana Price"></mm-avatar>
<mm-avatar name="support-triage-agent" kind="agent"></mm-avatar>
<mm-avatar name="Jordan Lee"></mm-avatar>
</mm-avatar-stack>
Guidance
Avatars say who did something: a person, an agent or a team. People show their photo, or their
initials in ink on mm-info-soft when there is no photo or it fails to load. Agents always show
the smart-toy robot on mm-primary-tint instead of a photo, so an agent can't pass for a
person. Teams show the groups icon on mm-sunken. The tint is secondary: the icon or the
initials carry the difference, and the accessible name says "agent" or "team" too.
Avatars are the one round thing besides status and filter pills. Sizes are 20, 24 (default), 32
and 40px. The accessible name is name (with the kind word for agents and teams); set
decorative when the name is printed next to the avatar, as in mm-owner-chip.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
name | name | string | '' | The person's, agent's or team's name. Used for the initials and the accessible name. |
kind | kind | AvatarKind | 'person' | person (default), agent or team. Agents always show the robot icon. |
src | src | string | '' | Photo URL, for people only. Falls back to initials if it fails to load. |
size | size | AvatarSize | 24 | 20, 24 (default), 32 or 40 pixels. |
decorative | decorative | boolean | false | Hide from assistive technology because the name is printed beside the avatar. |
CSS parts
| Part | Description |
|---|---|
avatar | The circle. |
image | The photo. |
initials | The initials. |
icon | The agent or team icon. |
CSS custom properties
| Property | Description |
|---|---|
--mm-avatar-ring | A 2px ring colour drawn around the circle, for stacks. Defaults to none. |
Examples
Every state of mm-avatar in Storybook, with keyboard and screen reader tests.