Avatar
Avatars provide a placeholder identity for users and visually represent contacts and accounts within ActiveCampaign. They are also often used to help visually organize comment threads in Conversations.
Loading...
Overview
Resources
Install
yarn add @camp/avatarUpgrading to Next Gen
🔄 Package and import path: Avatar is published from the Camp Design System as @camp/avatar instead of @activecampaign/camp-components-avatar.
🧩 appearance prop: Use appearance="userContact" (default) or appearance="accountBusiness" to choose the fallback icon when no image or initials are shown.
🎨 Initials and color: Pass a full name with name to show first and last initials. Use the color prop to set a background token, or omit it for a stable random color from the avatar palette.
Previous implementation
import { Avatar } from '@activecampaign/camp-components-avatar';
<Avatar name="Jane Doe" size="medium" />;New implementation
import Avatar from '@camp/avatar';
<Avatar name="Jane Doe" size="medium" />;Migration steps
- Update the import path: Replace
@activecampaign/camp-components-avatarwithAvatarfrom@camp/avatar.
Variations
Avatar displays a profile image, initials, or a fallback icon. Choose the variant based on available contact data.
Image avatar
Use when an image URL is available for a contact, user, or account.
import Avatar from '@camp/avatar';
<Avatar src="https://example.com/profile.jpg" size="medium" alt="Jane Doe" />;Initials avatar
Use when no image is set but first and last name are known. Initials use the first character of the first and last words in name (middle names are collapsed).
import Avatar from '@camp/avatar';
<Avatar name="John Doe" size="medium" color="lavender" />;Icon avatar
Use when there is no image and name is missing or is a single word without a space. The icon reflects appearance: contact (userContact) or account (accountBusiness).
import Avatar from '@camp/avatar';
<Avatar appearance="userContact" size="medium" />
<Avatar appearance="accountBusiness" size="medium" />Sizes
Avatar supports small, medium, large, and xLarge. Match size to layout density and context.
import Avatar from '@camp/avatar';
<Avatar size="small" appearance="userContact" />
<Avatar size="medium" appearance="userContact" />
<Avatar size="large" appearance="userContact" />
<Avatar size="xLarge" appearance="userContact" />| Size | Typical use |
|---|---|
small | Tight spaces such as dropdown rows for a contact or account |
medium | Tables, lists, and activity feeds |
large | Available but rarely used in product layouts |
xLarge | Top of a contact or account details page |
Background colors
For initials avatars, set color to a named token or omit it to use a random color from the avatar palette.
import Avatar from '@camp/avatar';
<Avatar name="John Doe" color="banana" />
<Avatar name="John Doe" color="creamsicle" />
<Avatar name="John Doe" color="lavender" />
<Avatar name="John Doe" color="mint" />
<Avatar name="John Doe" color="ocean" />
<Avatar name="John Doe" color="strawberry" />Long names
Long names still resolve to two initials (first and last word in the trimmed name).
import Avatar from '@camp/avatar';
<Avatar name="John Middle Public Smith" size="small" color="banana" />
<Avatar name="John Middle Public Smith" size="medium" color="ocean" />
<Avatar name="John Middle Public Smith" size="large" color="lavender" />Usage
Best practices
- Prefer a profile image when
srcis available. - Pass a full name (
First Last) when showing initials so users are identifiable at a glance. - Use
appearance="accountBusiness"for account records anduserContact(default) for people. - Match
sizeto the layout:smallin compact UI,mediumin dense lists,xLargeon detail headers. - Set
colorwhen initials need a consistent brand or status color; omit it when a random palette color is acceptable.
Content guidelines
✅ DO
- Use real profile images when the product has them
- Pass complete first and last names for initials
- Choose account vs contact appearance to match the entity type
🚫 DON’T
- Don’t rely on initials when only a single-word name is available (icon fallback will show)
- Don’t use
largeunless the layout specifically calls for it - Don’t use avatars without a clear entity association in the surrounding UI
Accessibility
Images
When using src, pass a meaningful alt string on Avatar so screen readers can identify the person or account. Additional props are forwarded to the underlying <img>.
Icon fallback
Fallback icons include aria-label values (Contact or Account) based on appearance.
Keyboard support
Avatar is presentational and does not receive focus or keyboard interaction by default. If the avatar opens a profile or menu, wrap it in an interactive element (for example a button) and label that control appropriately.
