Implementation
Avatar Props
AvatarGroup Props
Common Examples
import { Avatar } from "@servicetitan/anvil2";
const ExampleComponent = () => {
return <Avatar name="Albert Einstein" />;
};
Changing the avatar colors
Avatar colors can be changed using the color prop. Internally, the color could be adjusted in order to ensure low vision and colorblind users can read the text.Showing online status on avatars
Set the status prop to "online" or "offline" to add an indicator to the avatar.Avatar image and name
The content within an avatar will change based on the name and image props provided. If an image is provided, and does not fail to load, it will be displayed.If no image is provided, or it fails to load, two characters of the name value will show instead:
- If
name is a single word, the first two characters will be used
- If
name is multiple words, the first characters of the first and last words are used
Avatar with image and name
Avatar with name only
Stacking avatars in a group
Avatars can be grouped using the Avatar.Group component. They will overlap slightly, with the last Avatar component child on top.To make an avatar interactive, wrap it with a ButtonCompound with shape="circular". This will add a button element around the avatar which can be used for tab focus and interactions.<Avatar
name="Albert Einstein"
color="red"
size="small"
status="online"
image="https://example.com/image.jpg"
/>
Avatar Props
This string will be used for alt text and screenreaders even if it is not
visible.
size
"small" | "medium" | "large"
default:"medium"
<AvatarGroup max={3}>
<Avatar name="Priya Patel" />
<Avatar name="Marcus Chen" />
<Avatar name="Sofia Rodriguez" />
<Avatar name="Kwame Okafor" />
</AvatarGroup>
AvatarGroup Props
The group will truncate after showing this maximum number of avatars, and will
display the number of additional avatars (e.g. “+3”).
Last modified on January 23, 2026
