Skip to main content

Documentation Index

Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt

Use this file to discover all available pages before exploring further.

​
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.

​
Avatar as a button

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.
Last modified on April 9, 2026