Design System
v4.9.5
⌘K

Avatar

Mobile Support: Full
Jump to Props

Represent users in a visual way

On this page

The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.

Import

import { Avatar, AvatarButton, AvatarLink } from "@vitality-ds/components";

Contents

An Avatar can contain either a user profile photo or the user's initials. When both details are present, the initials will show before the image loads.

Sizes

Use the default size when possible. Depending on the visual context in which the Avatar is used, there are options to alter its size. The size should generally match the surrounding font size.

<Stack direction="horizontal" spacing="sm">
  <Avatar initials="TM" />
  <Avatar size="xs" initials="MM" />
  <Avatar size="sm" initials="QT" />
  <Avatar size="md" initials="LA" />
  <Avatar size="lg" initials="WWW" />
  <Avatar size="lg" imageSrc="https://i.pravatar.cc/300" initials="LA" />
  <Avatar size="xl" initials="TM" />
</Stack>

Colour Variants

The Avatar component provides fairly limited options for colour.

Aim For
  • Use the default colour most of the time
  • If necessary to draw attention the the Avatar, use primary
<Stack direction="horizontal">
  <Avatar initials="TM" />
  <Avatar color="primary" initials="MW" />
</Stack>

Interactive Avatars

If the Avatar is interactive, use either AvatarButton or AvatarLink. Whilst links will commonly navigate the user to that avatar's profile page, the use case for an AvatarButton is not always as clear. Thus, an AvatarButton requires a tooltip be provided via the tooltipContent prop to help the user understand what the button's action will do. Read more on tooltips here.

<Stack direction="horizontal">
  <AvatarButton
    tooltipContent="Copy user details"
    buttonProps={{
      onClick: () => alert("User details copied to clipboard!"),
    }}
    imageSrc="https://i.pravatar.cc/200"
    size="lg"
    initials="LA"
  />
  <AvatarLink
    linkProps={{
      href: "https://google.com",
      target: "_blank",
    }}
    imageSrc="https://i.pravatar.cc/300"
    size="lg"
    initials="LA"
  />
</Stack>

Figma Library

Figma.logo

Props

Avatar Props

color

Description

Optional colour set on the component when displaying initials

Type

"primary"

imageSrc

Description

URL of the avatar image to load.

Type

string

initials

Description

The initials of the user being represented. These are timmed to 2 characters.

Type

string

size

Description

The Size of the avatar

Type

"sm" | "md" | "lg" | "xs" | "xl"

Default Value

md

AvatarButton Props

buttonPropsRequired

Description

Props passed to the surrounding button element

Type

HTMLButtonElement

color

Description

Optional colour set on the component when displaying initials

Type

"primary"

imageSrc

Description

URL of the avatar image to load.

Type

string

initialsRequired

Description

The initials of the user being represented. These are timmed to 2 characters.

Type

string

size

Description

The Size of the avatar

Type

"sm" | "md" | "lg" | "xs" | "xl"

tooltipContentRequired

Description

Text to display in the AvatarButton's tooltip when hovered

Type

ReactNode

color

Description

Optional colour set on the component when displaying initials

Type

"primary"

imageSrc

Description

URL of the avatar image to load.

Type

string

initialsRequired

Description

The initials of the user being represented. These are timmed to 2 characters.

Type

string

linkPropsRequired

Description

Props passed to the <a> element.

Type

AvatarLinkPropsType

size

Description

The Size of the avatar

Type

"sm" | "md" | "lg" | "xs" | "xl"

© 2025