Auth Plugin's Avatar Component: Real Properties, Real Fallback, and Pairing With Identity Label

• Avatar's properties panel documents View Only, Hide Logged Out, Placeholder BG, and an Avatar Style object (Size, per-corner Radius, Border, Shadow).
• With no photo uploaded, an Avatar instance renders as a solid, placeholder-colored circle with a generic person-silhouette icon centered in it, not initials text.
• View Only and Hide Logged Out do different jobs: View Only just removes the upload button while the avatar still shows, Hide Logged Out removes the whole component for a signed-out visitor.
• Avatar and Identity Label are commonly placed together: an avatar image next to the signed-in user's name, in a profile header or account menu.

Auth Plugin's own introduction docs name Avatar directly as one of the official pre-built components, alongside Sign In, Sign Up, Forgot/Reset Password, OTP, Magic Link, Social Auth, Profile, Sign Out, Identity Label, and Code Overrides. The Avatar component has one job: show the signed-in user's profile picture, and let them replace it. The properties below come from Avatar's own panel in Framer and its canvas rendering, not the docs page.

In the Framer insert panel, Avatar's label reads "Avatar," with the description "Profile picture with upload support." That's the job in one line: it renders a circular image and, by default, lets the logged-in visitor click or hover to upload a new one. It's built for a profile page or account header, wherever a user's photo needs to sit alongside their other identity information.

The components overview page lists a dedicated docs subpage for Avatar, unlike Social Auth Button, which currently has none.

Avatar's properties panel:

• View Only: a Yes/No toggle, default No. Description: "Disable avatar upload. Shows image only."
• Hide Logged Out: a Yes/No toggle. Description: "Hide the avatar when user is not authenticated."
• Placeholder BG: a color field. One instance uses #9CA3AF, a mid-gray; another was edited to #EEEEEE, a near-white. Description: "Background color for placeholder when no avatar image is set." It's plainly editable, not a fixed default.
• Avatar Style: a style object, covered in full further down.

That's four top-level properties, plus everything nested inside Avatar Style. Notably absent: any initials setting or text-fallback field. Nothing in the real component produces initials at all.

An Avatar instance with no photo uploaded renders on the canvas as a solid circle filled with the Placeholder BG color, with a generic person-silhouette icon centered inside it, not text. Test the no-photo state against a real instance in Framer preview, and pick a Placeholder BG that reads well behind a gray silhouette.

These two toggles are easy to confuse because they both sound like they restrict something, but they control different outcomes.

View Only disables the upload interaction only. Set it to Yes and the avatar, or the placeholder circle if no photo exists, still renders exactly as before, the only change is that clicking or hovering no longer offers an upload option. That's the setting for a public profile card other visitors can see, where showing the photo makes sense but letting anyone change it through that view doesn't.

Hide Logged Out removes the entire component. Set it to Yes and a signed-out visitor sees nothing in that spot at all. This is the same self-hiding pattern covered in this post on self-hiding components, a dedicated toggle instead of a separate Code Overrides setup.

The confusion usually runs one direction: someone sets View Only to Yes expecting the avatar to disappear for guests, and it doesn't, because View Only was never about visibility. Want it gone entirely, use Hide Logged Out. Want it visible but not upload-able, use View Only. Placeholder BG never gets a chance to render alongside Hide Logged Out Yes, since Hide Logged Out removes the component first.

Avatar Style is a nested style object, detailed enough to be worth breaking down property by property.

• Size: a single number controlling the avatar's diameter, for example 80.
• Radius: a percentage-based corner radius, with an option to switch to per-corner control (TL, TR, BR, BL) instead of one uniform value. At 50%, a square avatar becomes a full circle; lower values produce a rounded square.
• Border: its own sub-panel: Solid border style plus separate Color and Width controls, useful for a ring around the avatar that stands out against a busy header.
• Shadow: its own sub-panel: a Box or Realistic type, a Position setting (Outside or Inside), and Color, X, Y, Blur, and Spread. Box is a standard flat drop shadow, Realistic adds modeled depth, and Inside produces an inset effect instead of a shadow cast outward. (The collapsed Avatar Style row can show "Mixed" as a summary label when a shadow has multiple layers set differently, that's a display label, not a third Type option inside the sub-panel.)

That's enough control to match an avatar to almost any header or card design without leaving Framer's native styling panel.

Avatar rarely sits alone. A common real-world pairing is Avatar next to Identity Label, the photo and the name, forming the profile header or account menu block a signed-in visitor sees.

Identity Label's real properties are Field (a dropdown, set to "Full Name" on the checked instance; whether other options like email exist isn't confirmed either way), Prefix, Suffix, Fallback, Hide Logged Out (Yes/No, set to Yes on the checked instance), and a Text Style object.

Put together: an Avatar instance (Size around 80, Radius near 50% for a full circle, Hide Logged Out Yes) sitting beside an Identity Label instance with Field set to Full Name and its own Hide Logged Out set to Yes. Both disappear together for a guest and appear together once someone authenticates, no Code Overrides needed, since both ship their own toggle.

This pairing, an image component next to a text identity component, is also where broader profile and branding customization tends to live. This profile branding guide covers that wider territory for a full account page.

• Designing around an initials fallback that doesn't exist. The real fallback is a placeholder-colored circle with a silhouette icon. Set Placeholder BG with that in mind.
• Using View Only when Hide Logged Out was needed. View Only keeps the avatar visible and only removes the upload control. To hide it entirely from guests, use Hide Logged Out.
• Forgetting Placeholder BG is editable. It ships gray by default, but it's a plain color field. Match it to your brand.
• Styling Border or Shadow without opening the sub-panels. Both are nested objects with their own controls, easy to miss at a glance.
• Leaving one Hide Logged Out toggle off when pairing Avatar with Identity Label. If one hides for guests and the other doesn't, a signed-out visitor sees a half-rendered header.

Does Avatar show initials when no photo is uploaded?
No. It's a solid circle in the Placeholder BG color with a generic silhouette icon centered inside it, not initials.

What's the difference between View Only and Hide Logged Out on Avatar?
View Only disables the upload button but still shows the avatar. Hide Logged Out removes the entire component for a visitor who isn't authenticated.

Can I change the placeholder color?
Yes. Placeholder BG is a standard, editable color field, seen at #9CA3AF on one instance and changed to #EEEEEE on another.

What properties does Avatar Style include?
Size, Radius (percentage or per-corner TL/TR/BR/BL), Border (Color/Width/Style sub-panel), and Shadow (Box or Realistic type, Outside/Inside position, Color, X, Y, Blur, Spread).

Does Avatar work with Google sign-in?
Avatar displays whatever profile data Auth Plugin has for the signed-in user regardless of how they signed in. Auth Plugin currently supports Google as its OAuth provider, alongside email/password, magic link, and OTP.

What happens if Placeholder BG is set but Hide Logged Out is also Yes?
Hide Logged Out removes the component before Placeholder BG would ever render, so there's no interaction between the two.

Avatar's real properties panel documents View Only, Hide Logged Out, Placeholder BG, and a detailed Avatar Style object covering Size, per-corner Radius, Border, and Shadow. Its actual no-photo fallback is a placeholder-colored circle with a generic silhouette icon, not initials text. View Only and Hide Logged Out solve different problems, hiding the upload control versus hiding the whole component, and both matter once you pair Avatar with Identity Label to build a profile header that shows a signed-in user's photo next to their name and disappears cleanly for guests.