Shapes
Circle Avatars are the most common shape
Rounded Square Avatars are useful within content areas that are also rounded for consistency in spacing
Sizes
The small size is useful in content-heavy layouts to add a distinguishing element between rows of people or businesses.
The Medium size is default
The large size should be used when the Avatar is called out and important for the user to interact with. An example would be an Avatar selection and upload interface.
Backgrounds
The default avatar has a subtle neutral background that will stand out against normal background colors.
The color of an avatar can be set explicitly in cases where we want to allow users to define their own color. The text color will automatically update to be contrast compliant.
Avatars can automatically apply a consistent color from our Extended Color Palette. The text color will automatically update to be contrast compliant.
A background image can be applied which removes the initials from the avatar. This is used for user-generated photos and company logos.
Icons
Best Practices
Avatars should be one of 3 sizes:
- Small (24 x 24 px): use when the medium size is too big for the layout, or when the avatar has less importance
- Medium (32 x 32 px): use as the default size
- Large (48 x 48 px): use when an avatar is a focal point (e.g. on a single customer or business card)
Importing
import { Avatar } from '@servicetitan/design-system';