Avatar
Shows who a person is at a glance, with their picture or their initials, such as the signed-in clinician in a sidebar's footer.
Initials
The default. Most people in clinical software have no picture, so this is what most people see.
import { Avatar, AvatarFallback } from "@cadence-clinical/ui";
<Avatar>
<AvatarFallback>TE</AvatarFallback>
</Avatar>;With a picture
Put an AvatarImage before the fallback. The initials show until the picture has loaded, and stay if it does not load. This picture is a drawn pattern.
<Avatar>
<AvatarImage src="/staff/tom-ellis.jpg" alt="Dr Tom Ellis" />
<AvatarFallback>TE</AvatarFallback>
</Avatar>Sizes
sm, default and lg are the small, default and large control heights, so each follows the density.
<Avatar size="sm">
<AvatarFallback>TE</AvatarFallback>
</Avatar>
<Avatar>
<AvatarFallback>TE</AvatarFallback>
</Avatar>
<Avatar size="lg">
<AvatarFallback>TE</AvatarFallback>
</Avatar>Beside a name
Hide the avatar from screen readers with aria-hidden when the name is beside it, so the initials are not read before the name.
<div className="flex items-center gap-2 text-control">
<Avatar aria-hidden>
<AvatarFallback>TE</AvatarFallback>
</Avatar>
<span className="flex flex-col leading-tight">
<span className="font-medium">Dr Tom Ellis</span>
<span className="text-control-sm text-muted-foreground">Registrar · GMU A</span>
</span>
</div>With a badge
An AvatarBadge is a dot on the lower edge. Say what it means in words inside it, because a dot is colour alone.
import { Check } from "lucide-react";
<Avatar size="lg">
<AvatarFallback>TE</AvatarFallback>
<AvatarBadge>
<Check aria-hidden />
<span className="sr-only">On shift</span>
</AvatarBadge>
</Avatar>;A group
AvatarGroup overlaps its avatars, and AvatarGroupCount counts the people it does not show. Name the group, and say what the count counts.
<AvatarGroup role="list" aria-label="GMU A team">
<Avatar role="listitem">
<AvatarFallback>TE</AvatarFallback>
</Avatar>
<Avatar role="listitem">
<AvatarFallback>AS</AvatarFallback>
</Avatar>
<AvatarGroupCount role="listitem">
+4<span className="sr-only"> more people</span>
</AvatarGroupCount>
</AvatarGroup>