Skip to content

Avatar

Circular identity for people and accounts. Prefer a photo when available; fall back to initials.

Examples

Sizes

JLJLJL

Fallback

ARNBSK

Overview

Avatar shows a person's image or initials in a circle. Pair AvatarImage with AvatarFallback so missing or slow images still identify the user. Built on Base UI.

tsx

import { Avatar, AvatarImage, AvatarFallback } from "@standard-ui/react"

<Avatar>
  <AvatarImage src="/avatar.jpg" alt="Jordan Lee" />
  <AvatarFallback>JL</AvatarFallback>
</Avatar>

Usage

Initials

Use one or two characters from the display name. Keep fallback text short so it stays readable at sm.

tsx

<Avatar>
  <AvatarFallback>JL</AvatarFallback>
</Avatar>

Alt text

Always pass a meaningful alt on AvatarImage — usually the person's name. Decorative avatars next to visible names can use an empty alt when appropriate.

tsx

<AvatarImage src={src} alt="Jordan Lee" />

API

Avatar accepts Base UI root props plus size. Image and fallback pass through to their Base UI parts.

PropTypeDefaultDescription
size"sm" | "md" | "lg""md"Diameter and type scale of the avatar.
srcstring—On AvatarImage — image URL.
altstring—On AvatarImage — accessible name.

Guidelines

Do

  • Always include a fallback for missing images
  • Match size to density — sm in lists, lg in profiles
  • Use consistent initials rules across the product

Don't

  • Don't omit alt on meaningful photos
  • Don't use long fallback strings — two characters max
  • Don't mix rounded and square treatments in one product surface