<Avatar name="Rose Tico" size="l" />

Shapes

Circle Avatars are the most common shape

<Avatar name="Rose Tico"  />

Rounded Square Avatars are useful within content areas that are also rounded for consistency in spacing

<Avatar name="Rose Tico" rounded  />

Sizes

The small size is useful in content-heavy layouts to add a distinguishing element between rows of people or businesses.

<Avatar name="Rose Tico" size="s" />

The Medium size is default

<Avatar name="Rose Tico" />

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.

<Avatar name="Rose Tico" size="l" />

Backgrounds

The default avatar has a subtle neutral background that will stand out against normal background colors.

<Avatar name="Rose Tico" />

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.

<Avatar name="Rose Tico" color="#000" />

Avatars can automatically apply a consistent color from our Extended Color Palette. The text color will automatically update to be contrast compliant.

<Stack spacing={1}>
    <Avatar name="Rose Tico" autoColor />
    <Avatar name="Grand Moff Tarken" autoColor />
    <Avatar name="IG-88" autoColor />
</Stack>

A background image can be applied which removes the initials from the avatar. This is used for user-generated photos and company logos.

<Avatar image="https://i0.wp.com/makingstarwars.net/wp-content/uploads/2017/11/IMG_6937.jpg" />

Icons

<Stack spacing={1} alignItems="center">
    <Avatar icon="email" color="#2270ee" size="s" />
    <Avatar icon="mailbox" color="#6954C0" size="s" />
    <Avatar icon="email" color="#2270ee" />
    <Avatar icon="mailbox" color="#6954C0" />
    <Avatar icon="email" autoColor size="l" />
    <Avatar icon="mailbox" autoColor size="l" />
</Stack>

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';