Avatar

Examples

Transaction badge

Large avatars carry a bottom-right badge, cut out of the avatar edge by page-background padding — the design uses it for buy and sell markers.

Usage

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@sophic/portal-ui/components/ui/avatar";

<Avatar size="lg">
  <AvatarImage src={person.photoUrl} alt={person.name} />
  <AvatarFallback>{person.initials}</AvatarFallback>
</Avatar>

The fallback renders while the image loads and whenever it fails. Base System sizes are xs (16px), sm (24px), md (32px, the default), lg (48px), and xl (64px).

border is an optional 1px inset rim. Off by default so the size token is the layout box.

Props

AvatarImage and AvatarFallback accept their Radix counterparts' props.

Changelog

• 4 October 2026 — Optional border rim. Off by default. Full notes
• 24 September 2026 — Fallback fill is the chip color (neutral-200). Full notes
• 29 September 2026 — Sizes are 16, 24, 32, 48, and 64px. Full notes
• 24 September 2026 — Added xs (12px) and xl (64px). Full notes
• 20 August 2026 — Chrome in a CSS module; look unchanged. Full notes
• 15 July 2026 — Added (16 / 32 / 58px circles, fallback, badge slot). Full notes