Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Avatar] Implement Avatar #1347

Closed
colmtuite opened this issue Jan 20, 2025 · 2 comments · Fixed by #1210
Closed

[Avatar] Implement Avatar #1347

colmtuite opened this issue Jan 20, 2025 · 2 comments · Fixed by #1210
Labels
component: avatar This is the name of the generic UI component, not the React module!

Comments

@colmtuite
Copy link
Contributor

Feature request

Summary

Avatar component for handling the initials API and image fallback.

Examples in other libraries

https://www.radix-ui.com/primitives/docs/components/avatar

@github-project-automation github-project-automation bot moved this to Backlog in Base UI Jan 20, 2025
@github-actions github-actions bot added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jan 20, 2025
@colmtuite colmtuite moved this from Backlog to Selected in Base UI Jan 20, 2025
@zannager zannager added the component: avatar This is the name of the generic UI component, not the React module! label Jan 20, 2025
@mnajdova
Copy link
Member

mnajdova commented Jan 21, 2025

Here is the proposed API for the component:

Avatar.Root

  • render
  • className

Avatar.Image

  • src
  • alt
  • onLoadingStatusChange
  • render
  • className

Avatar.Fallback

  • render
  • className
  • delay (similar to Radix UI’s delayMs)

These are some examples usages:

// Image avatar
<Avatar.Root>
  <Avatar.Image src="" alt="" />
<Avatar.Root>

// Image avatar with fallback
<Avatar.Root>
  <Avatar.Image src="" alt="" />
  <Avatar.Fallback delay={600}>MN</Avatar.Fallback>
<Avatar.Root>

// Initials avatar 
<Avatar.Root>
  MN
<Avatar.Root>

@arndom
Copy link

arndom commented Jan 22, 2025

Can I work on this? Nevermind, seen the existing PR

@michaldudak michaldudak moved this from Selected to In progress in Base UI Jan 29, 2025
@michaldudak michaldudak removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jan 29, 2025
@github-project-automation github-project-automation bot moved this from In progress to Done in Base UI Feb 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: avatar This is the name of the generic UI component, not the React module!
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

5 participants