Avatar

Demos

An avatar with an image, and one with initials.

PRAM

"use client"

import { Avatar, AvatarFallback, AvatarImage } from "@workspace/ui/components/avatar"

export function AvatarDemo() {
  return (
    <div className="flex items-center gap-3">
      <Avatar>
        <AvatarImage src="/apple-touch-icon.png" alt="PREDICT" />
        <AvatarFallback>PR</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarFallback>AM</AvatarFallback>
      </Avatar>
    </div>
  )
}

Usage

Use an avatar to show who a report, message, or appointment belongs to. Always include a fallback: it shows while the image loads and stays if the image fails.

Import it from @workspace/ui/components/avatar.

Anatomy

Avatar — The circle. Sets the size.
AvatarImage — The photo. Hidden until it loads.
AvatarFallback — Initials or an icon, shown when there is no image.
AvatarBadge — A dot in the bottom corner, such as an online status.
AvatarGroup — Overlaps several avatars.
AvatarGroupCount — The "+4" circle at the end of a group.

Notes

Give AvatarImage an alt with the person's name.
Use two initials at most.
The badge hides its icon at the sm size, where only the dot fits.

Examples

Sizes

sm, default, and lg.

AMAMAM

"use client"

import { Avatar, AvatarFallback } from "@workspace/ui/components/avatar"

export function AvatarSizes() {
  return (
    <div className="flex items-center gap-3">
      <Avatar size="sm">
        <AvatarFallback>AM</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarFallback>AM</AvatarFallback>
      </Avatar>
      <Avatar size="lg">
        <AvatarFallback>AM</AvatarFallback>
      </Avatar>
    </div>
  )
}

With badge

A coloured dot, or a badge with an icon.

SPSP

"use client"

import { CheckIcon } from "lucide-react"

import { Avatar, AvatarBadge, AvatarFallback } from "@workspace/ui/components/avatar"

export function AvatarWithBadge() {
  return (
    <div className="flex items-center gap-3">
      <Avatar>
        <AvatarFallback>SP</AvatarFallback>
        <AvatarBadge className="bg-status-normal" />
      </Avatar>
      <Avatar size="lg">
        <AvatarFallback>SP</AvatarFallback>
        <AvatarBadge>
          <CheckIcon />
        </AvatarBadge>
      </Avatar>
    </div>
  )
}

Group

A care team with a count of the rest. The count matches the size of the avatars in the group.

SPJLMK

"use client"

import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
} from "@workspace/ui/components/avatar"

const careTeam = ["SP", "JL", "MK"]

export function AvatarGroupDemo() {
  return (
    <AvatarGroup>
      {careTeam.map((initials) => (
        <Avatar key={initials}>
          <AvatarFallback>{initials}</AvatarFallback>
        </Avatar>
      ))}
      <AvatarGroupCount>+4</AvatarGroupCount>
    </AvatarGroup>
  )
}

Props

Unlisted props pass through to the underlying element.

Avatar

Prop	Type	Default	Description
`size`	`"sm", "default", or "lg"`	`default`	24, 32, or 40 pixels.

AvatarImage

Prop	Type	Default	Description
`src`	`string`	—	Image URL.
`alt`	`string`	—	The person's name.