const Wrapper = styled.div` .AvatarRoot { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; overflow: hidden; user-select: none; width: 45px; height: 45px; border-radius: 100%; background-color: var(--blackA3); } .AvatarImage { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .AvatarFallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--blackA3); color: black; font-size: 15px; line-height: 1; font-weight: 500; } `; return ( <Wrapper> <Avatar.Root className="AvatarRoot"> <Avatar.Image className="AvatarImage" src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80" alt="Colm Tuite" /> <Avatar.Fallback className="AvatarFallback" delayMs={600}> CT </Avatar.Fallback> </Avatar.Root> </Wrapper> );