Avatar

InstallationCopy Anchor Link

From npm:

import {
  Avatar,
  AvatarBadge,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
} from "@cadence-clinical/ui";

From the shadcn registry:

pnpm dlx shadcn@latest add @cadence/avatar

Installation covers both routes and the styles each one needs.

UsageCopy Anchor Link

import { Avatar, AvatarFallback, AvatarImage } from "@cadence-clinical/ui";

<Avatar>
  <AvatarImage src="/staff/tom-ellis.jpg" alt="Dr Tom Ellis" />
  <AvatarFallback>TE</AvatarFallback>
</Avatar>;

APICopy Anchor Link

Avatar follows the shadcn Avatar and keeps its part names and its size prop. It is built on the Base UI Avatar.

PropsCopy Anchor Link

SizesCopy Anchor Link

Each size is a control height, so an avatar is as tall as the controls beside it.

The initials, an AvatarBadge and an AvatarGroupCount follow the avatar's size.

What Cadence changesCopy Anchor Link

• Sizes follow the density. shadcn's are 24px, 32px and 40px at every density.
• The edge is the text colour at 10%, so it shows in both modes without a dark: override. shadcn blends its border colour, with a different blend in dark mode.
• The initials are medium weight, at the control text size. shadcn's are 14px at regular weight.
• AvatarGroup overlaps with a negative margin on each avatar after the first. shadcn uses -space-x-2.

Code written for the shadcn Avatar works unchanged: it takes the same parts and props.

AccessibilityCopy Anchor Link

• Avatar has no role. The fallback's initials are read as text, and the picture is an img named by its alt.
• Beside a name, hide the avatar with aria-hidden, so the initials are not read before the name.
• The fallback's initials hold at least 4.5:1 against its fill, in every mode. The token tests check the pair.
• AvatarBadge is a dot. Put its meaning in words inside it with sr-only.