Docs draft
Avatar
Component storyFigma component set ↗React component ↗DSDS entity ↗
Variants
size · sm / md / lg — 32 / 64 / 96, snapped from the old 34/60/96 (header, comments, profile selection).
ring · none / selected / highlight — selected = 4px accent ring (the old orange); highlight = 3px text.primary ring (the old white hover-select).
States
rest — At rest with no interaction.
hover — Pointer is over the control.
Design specifications
| shape | radius.full; image fills the circle |
| fallback | color.bg.secondary + the user glyph in color.text.secondary — never an empty gray |
| ring-selected | color.accent.base, 4px outside |
| ring-highlight | color.text.primary, 3px outside |
| hover-wash | color.bg.scrim |
| badge-slot | 28px, bottom-right overlay, lg only |
Accessibility
Image alt = the person's name; the fallback glyph carries role=img with the same label. Avatar itself is not interactive — wrap it in a Button or Link when it acts.