Avatar
CuteAvatar
With image
System avatar
Group avatar
Username badges
Username with avatar
Username with full info
Notification count
The header's profile trigger rides a NotchBadge: the count floats over the
top-end corner and a matching notch is masked out of the avatar, so the gap is
see-through instead of painted. See Buttons for the icon
button version.
Across avatar sizes
Step the badge up with the avatar via size (it defaults to sm, tuned for the
48px icon buttons in the header) or the count turns into a speck on the portrait
sizes: sm through md keep sm, lg takes default, then lg, xl, 2xl.
Placement follows on its own. A ResizeObserver measures both the badge and the
surface under it: the notch mask tracks the badge's rendered box (a 99+ count
widens the circle, and the cut-out widens with it), and the badge docks on the
circle's 45° point rather than its bounding-box corner, which pulls it tighter
to the rim the bigger the avatar gets. Square surfaces keep the corner perch.