Avatar
People and group identity with images, initials, and compact presence marks.
Assigned technicians
Usage
import { Avatar, AvatarFallback, AvatarImage } from "@workshop1/ui/components/avatar"Always provide a fallback so a missing or slow image does not leave an empty circle. Use sm (24px), default (32px), and lg (40px) where the surrounding density calls for them; xl (64px, larger initials) is for profile and logo upload previews. Group overlapping avatars with AvatarGroup and make the overflow count part of a label that names the represented people.
Use a meaningful image alt when the avatar identifies a person without adjacent text. Use an empty alt when the same name is already beside it. Initials are a fallback, not the only accessible name.
Presence
AvatarBadge is a small visual mark. Pair any presence or availability meaning with text elsewhere; the mark alone cannot explain a user’s state.