Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Variants for AvatarGroup

See original GitHub issue

Mui’s Avatar component has the variants squared, rounded, circle to transform the shape of the avatar. In an AvatarGroup when more than the max number of avatars are present an avatar displaying the remaining number of Avatars (+x) is appended. AvatarGroup has no property to change the shape of this appended Avatar. If I want this appended avatar to match the avatars in the group I have to do it manually through style overrides or css classes.

I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

I think AvatarGroup’s properties should be updated to give more control over how the +x Avatar appears

Examples 🌈

Motivation 🔦

It’s not hard to work around using custom css but I think its an oversight. If we support alternative variants for Avatars will we shouldn’t assume only the rounded variant will be used in AvatarGroup.

Issue Analytics

State:
Created 3 years ago
Reactions:2
Comments:5 (5 by maintainers)

Top GitHub Comments

1reaction

mnajdovacommented, Oct 1, 2020

@hjades sure feel free to 😃

1reaction

hjadescommented, Oct 1, 2020

hi! can i take this issue? thanks~

Top Results From Across the Web

Variants for AvatarGroup #22810 - mui/material-ui - GitHub

Mui's Avatar component has the variants squared, rounded, circle to transform the shape of the avatar. In an AvatarGroup when more than the ......

AvatarGroup API - Material UI - MUI

API reference docs for the React AvatarGroup component. ... import AvatarGroup from '@mui/material/AvatarGroup'; ... string, 'circular'. The variant to use.

Avatar - Chakra UI

The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.

React MUI AvatarGroup API - GeeksforGeeks

variant : It is used to choose different variants of avatars. CSS Rules: root (MuiAvatarGroup-root): It is the style applied to the root...

React material-ui AvatarGroup rounded shape for extra child

... (); return ( <AvatarGroup max={4} className={classes.root}> <Avatar alt="Remy Sharp" variant="rounded" src="/static/images/avatar/1.jpg" ...