Avatar

Avatars are used to show a thumbnail representation of an individual or business in the interface.

User Avatar

Avatars are used to represent people such as employees and users.

<UserAvatar name="Greg Wilkinson" />

Color

The color of an avatar is automatically generated from the name provided.

const names = [
  'Lil Bo Peep',
  'Buzz Lightyear',
  'Sheriff Woody',
  'Teddy Bear',
  'Duke Caboom',
];
return (
  <Inline gap="medium">
    {names.map((n) => (
      <UserAvatar key={n} name={n} />
    ))}
  </Inline>
);

Guest

Use the guest prop to indicate an avatar is less significant, for example a guest user.

<UserAvatar name="Guest user" guest />

Inactive

Note: This was previously the disabled prop which has been deprecated.

Use inactive prop to indicate that an avatar is somehow unavailable, for example an employee's details are incomplete; indicating that they're not eligible to be included in a pay run.

<UserAvatar inactive name="Disabled" />

Size

Use the size property to set the width and height of an avatar. The initials will size automatically.

NOTE: that the size xsmall will only display a single character for the initials.

<Inline gap="medium">
  <UserAvatar size="xsmall" disabled name="XS" />
  <UserAvatar size="small" disabled name="SM" />
  <UserAvatar size="medium" disabled name="MD" />
  <UserAvatar size="large" disabled name="LG" />
  <UserAvatar size="xlarge" disabled name="XL" />
</Inline>

Entity Avatar

Use the EntityAvatar to identify legal entities like companies.

Usage

The entity avatar is very much like the user avatar, though it's a rounded-square shape to distinguish it.

<EntityAvatar name="Reckon" />

Type

Entities may be of two different types. The defining characteristic is the initials character limit.

<Inline gap="small">
  <EntityAvatar name="Reckon Pty Ltd" type="Organisation" />
  <EntityAvatar name="Greg Wilkinson" type="Person" />
</Inline>

Instance Avatar

Use the instance avatar to identify things, or groups of things, that are neither people nor legal entities. You might use an instance to highlight a payrun item or even a group of entities under a single icon.

Name

Providing a name will render the first letter and automatically select a colour from the theme.

<Instance name="Example" />

Icon

The icon property will accept any icon from the icon package.

<Instance icon={DollarSignIcon} name="Icon Example" />

Color

Unlike the other avatar variants, the instance component will accept an explicit color property.

const { palette } = useTheme();
return <Instance color={palette.global.accent} icon={DollarSignIcon} />;

Size

The instance component only supports three sizes.

<Inline gap="small">
  <Instance size="xsmall" icon={StarIcon} disabled />
  <Instance size="small" icon={StarIcon} disabled />
  <Instance size="large" icon={StarIcon} disabled />
</Inline>

Avatar Stack

Usage

Stack a group of related user avatars on top of one another.

const names = [
  'Lil Bo Peep',
  'Buzz Lightyear',
  'Sheriff Woody',
  'Teddy Bear',
  'Duke Caboom',
  'Pizza Planet',
  'Rocky Gibraltar',
  'Barrel Monkeys',
  'Bucket Soldiers',
];
return (
  <AvatarStack size="small">
    {names.map((n) => (
      <UserAvatar key={n} name={n} />
    ))}
  </AvatarStack>
);

Size

The size provided to the avatar stack will influence the avatars, overflow text, and the gap between each avatar.

Overflow text

You may choose to hide the overflow text.

const names = [
  'Lil Bo Peep',
  'Buzz Lightyear',
  'Sheriff Woody',
  'Teddy Bear',
  'Duke Caboom',
  'Pizza Planet',
  'Rocky Gibraltar',
  'Barrel Monkeys',
  'Bucket Soldiers',
];
return (
  <AvatarStack size="small" hideOverflowText>
    {names.map((n) => (
      <UserAvatar key={n} name={n} />
    ))}
  </AvatarStack>
);