Preview
Usage
An avatar is a visual representation of a contact, user, or entity in Dialpad.
The component prioritizes different sources for content display, sequentially checking first for an image source (image-src) or content in the icon slot. If neither are provided, initials are extracted from the full name (full-name) using the following logic:
- If the string contains two or more words, the result will be the first character of the first and last word capitalized. E.g.:
full-name: "Jaqueline Nackos"will result in:JN. - If the string contains only one word, the result will be the first two characters capitalized. E.g:
full-name: "Jaqueline"will result in:JA.full-name: "10"will result in:10. - If full-name is not provided, the result will be an empty string.
| Type | Usage | |
|---|---|---|
| Icon | When no username can be associated with the Avatar. | |
DP | Initials | When the user's name is known. |
 | Image | When a custom image has been uploaded. |
| Group | When reflecting more than 2 participants. |
Variants and Examples
Icon
Initials
Unless otherwise specified via the color prop, a background color will be provided based on the seed prop. This background is based on a hashed version of the user ID, allowing the colors to be consistent across sessions. Colors are dynamically computed using OKLCH and adapt to the current theme.
Image
If image-src is not provided, or if image fails to load, the avatar will fall back to the initials extracted from the full-name.
Sizes
Avatar supports a 100-based sizing scale. T-shirt sizes (xs, sm, md, lg, xl) are deprecated but still supported as aliases.
| Size | Alias | Dimensions |
|---|---|---|
100 | xs | 16px |
150 | — | 20px |
200 | sm | 24px |
250 | — | 28px |
300 | md | 32px (default) |
400 | — | 40px |
500 | lg | 48px |
600 | xl | 64px |
700 | — | 96px |
800 | — | 128px |
900 | — | 256px |
Group
The group avatar is used to represent group discussions in a compact form. A count badge is added on top of the avatar. The avatar shown is the last person to send a message in the group. The group avatar is available only from sizes 100-500. At size 100, only the count badge is shown.
Presence
Provides the user's current presence, positioned in the bottom right corner.
Overlay
Interactive
Avatars that appear alongside a visible label (e.g., a user's name) are decorative and should not be focusable or announced by screen readers. This is the default behavior.
Avatars that convey meaning on their own — such as navigation or actions — should be made interactive using the interactive prop. This renders the avatar as a <button> with visible focus ring and keyboard activation via Enter and Space. Provide an accessible name via icon-aria-label (for icon avatars), full-name (for initials avatars), or image-alt (for image avatars).
Deactivated
Use the deactivated prop to render the avatar in a desaturated/washed-out state. This is useful to indicate that a user is deactivated or inactive.
Vue API
import { DtAvatar } from '@dialpad/dialtone-vue';Slots
Props
Events
Classes
Accessibility
Initials avatars use background and text color pairings that meet WCAG AA minimum contrast requirements. Variants 0–5 use light text on dark backgrounds, and variants 6–9 use dark text on light backgrounds.
The deactivated prop applies a visual desaturation effect that is not conveyed to screen readers. If the deactivated status is meaningful, communicate it through surrounding text or an aria-label on a parent element.
The group count badge includes role="img" and an aria-label (e.g., "3 participants") so screen readers announce the participant count with context rather than reading the raw number.
For more guidance, see the WCAG images tutorial.