[naveedsajjdawan]

Summary

The "Avatar" component currently requires an image URL and always renders an "" element. When a user does not have a profile image, consumers need to implement their own fallback UI to display initials or other short text.

This change introduces an optional "placeholder" prop, allowing "Avatar" to display text when no image URL is available. The fallback uses Primer theme colors and preserves the component's existing sizing and shape behavior.

Behavior

• When "src" is provided, the component renders the image as before.
• When both "src" and "placeholder" are provided, the image takes precedence.
• When "src" is omitted, the component renders the placeholder text in a centered element.
• The placeholder uses "alt" as its accessible name when provided; otherwise, it uses the placeholder text.
• Shared props such as "size", "square", "className", and "style" continue to work for both rendering paths.

Changelog

New

• Add the "placeholder" prop to support text-based Avatar fallbacks.

Changed

• Make "src" optional while preserving existing image-based usage.

Removed

• None.

Rollout strategy

• Not sure — this is an open-source contribution.

Testing & Reviewing

Added unit tests covering:

• Rendering placeholder text when "src" is omitted.
• Preferring the image when both "src" and "placeholder" are provided.
• Using "alt" as the accessible name for a placeholder.

Please review the fallback's accessibility semantics and visual styling alongside the existing image-based Avatar behavior.

[changeset-bot]

⚠️ No Changeset found

Latest commit: f0671b0

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[francinelucca]

👋🏽 @naveedsajjdawan thanks for the contribution. Can you please fill out the PR description with more context on the intent of these changes? Thanks!