AvatarButton not displaying text content correctly

[roomman]

What component (if applicable)

• URL for category: https://catalyst.tailwindui.com/docs/avatar
• Component name: AvatarButton

Describe the bug Rendering an Avatar and AvatarButton side-by-side as follows:

<AvatarButton className="size-12 bg-white text-black" initials="SZ" />
<Avatar className="size-12 bg-white text-black" initials="SZ" />

In the case of AvatarButton, the text element that contains initials is positioned outside of the containing element, and not visible.

Screenshots

[reinink]

Hey good catch! Thanks for letting us know, this has been fixed.

To get the updated version you can simply download Catalyst again from the Tailwind UI website, or you can make the following changes to your avatar.tsx file:

First add the size-full class to the Avatar svg:

  <svg
-   className="select-none fill-current text-[48px] font-medium uppercase"
+   className="size-full select-none fill-current text-[48px] font-medium uppercase"
    viewBox="0 0 100 100"
    aria-hidden={alt ? undefined : 'true'}
  >

Next, add the size-full class to the Avatar image:

- {src && <img src={src} alt={alt} />}
+ {src && <img className="size-full" src={src} alt={alt} />}

Finally, add the inline-grid class to the AvatarButton:

  let classes = clsx(
    className,
    square ? 'rounded-[20%]' : 'rounded-full',
-   'relative focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500'
+   'relative inline-grid focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500'
  )

Thanks again! 👍

[roomman]

@reinink, this is amazing, thanks for documenting those changes. 🥳

On a related note, if you drop "MW" in as initials, the text goes edge to edge in the container:

I added 'p-1' to to the className it looks better for <Avatar>

The same isn't true for <AvatarButton> because of the outline

Can you recommend a solution to this one? 🙏🏼

[roomman]

For now, I've just added p-1 to the Avatar svg. Do let me know if you think there's a better solution.

  <svg
-   className="select-none fill-current text-[48px] font-medium uppercase"
+   className="size-full select-none fill-current p-1 text-[48px] font-medium uppercase"
    viewBox="0 0 100 100"
    aria-hidden={alt ? undefined : 'true'}
  >

Thanks again 👌🏼

[adamwathan]

Going to reopen this so we don’t forget about the other issue you raised, definitely want the initials to be rendered the same for regular avatars and button avatars 👍🏻

[reinink]

Hello again @roomman 👋

So from what I can tell the Avatar and AvatarButton components render exactly the same when using the initials prop. That said I agree that a little padding would be helpful to keep the text from bumping up against the edge.

To fix this I actually used a percentage based padding (p-[5%]), since this scales up automatically for large avatars. Here's how it looks:

Here's the source code for this demo:

<Avatar initials="MW" className="size-6 bg-zinc-500 text-white" />
<AvatarButton initials="MW" className="size-6 bg-zinc-500 text-white" />
<Avatar initials="MW" className="size-8 bg-zinc-500 text-white" />
<AvatarButton initials="MW" className="size-8 bg-zinc-500 text-white" />
<Avatar initials="MW" className="size-10 bg-zinc-500 text-white" />
<AvatarButton initials="MW" className="size-10 bg-zinc-500 text-white" />

Note how both the Avatar and AvatarButton look identical — not sure why you were seeing a difference there. Maybe try download Catalyst from the Tailwind UI website again and grab a fresh copy of the avatar.tsx file?

Hope that helps! 🤙