ProductUI Avatar - PrimerBlazor

Basic Avatar

 <PrimerStack Direction="StackDirection.Column" Gap="StackGap.Gap16">
    <PrimerStack Align="StackAlign.Center">
        <PrimerAvatar ImageUrl="https://avatars.githubusercontent.com/u/1?v=4" Size="6" />
        <PrimerAvatar ImageUrl="https://avatars.githubusercontent.com/u/1?v=4" Size="5" />
        <PrimerAvatar ImageUrl="https://avatars.githubusercontent.com/u/1?v=4" Size="4" />
        <PrimerAvatar ImageUrl="https://avatars.githubusercontent.com/u/1?v=4" Size="3" />
        <PrimerAvatar ImageUrl="https://avatars.githubusercontent.com/u/1?v=4" Size="2" />
        <PrimerAvatar ImageUrl="https://avatars.githubusercontent.com/u/1?v=4" Size="1" />
    </PrimerStack>
    <PrimerStack Align="StackAlign.Center">
        <PrimerAvatar ImageUrl="https://avatars.githubusercontent.com/u/1?v=4" Size="1" IsCircle="false" />
        <PrimerAvatar ImageUrl="https://avatars.githubusercontent.com/u/1?v=4" Size="2" IsCircle="false" />
        <PrimerAvatar ImageUrl="https://avatars.githubusercontent.com/u/1?v=4" Size="3" IsCircle="false" />
        <PrimerAvatar ImageUrl="https://avatars.githubusercontent.com/u/1?v=4" Size="4" IsCircle="false" />
        <PrimerAvatar ImageUrl="https://avatars.githubusercontent.com/u/1?v=4" Size="5" IsCircle="false" />
        <PrimerAvatar ImageUrl="https://avatars.githubusercontent.com/u/1?v=4" Size="6" IsCircle="false" />
    </PrimerStack>
</PrimerStack>

AvatarStack

+ 3

<PrimerStack>
    <PrimerStack Direction="StackDirection.Column" Gap="StackGap.Gap16">
        <PrimerAvatarGroup Images="@AvatarUrls" Size="5" />

        <PrimerAvatarGroup Images="@AvatarUrls" Size="5" IsCircle="false" />

        <PrimerStack Direction="StackDirection.Row" Gap="StackGap.Gap16">
            <PrimerAvatarGroup Images="@AvatarUrls" Size="5" MaxDisplay="3" UseFlexStyle="true" Link="/product/components/avatar" />
            <PrimerAvatarGroup Images="@AvatarUrls" Size="5" MaxDisplay="3" UseFlexStyle="true" IsCircle="false" Link="/product/components/avatar" />
        </PrimerStack>
    </PrimerStack>
</PrimerStack>

AvatarPair

<PrimerAvatarPair PrimaryImage="https://avatars.githubusercontent.com/u/92997159?v=4"
                    SecondaryImage="https://avatars.githubusercontent.com/primer"
                    PrimarySize="6"
                    SecondarySize="2" />

Avatar Component Options

Available options for Avatarcomponent

Name	Description	Default Value	CSS Class
ImageUrl	URL of the avatar image	""	-
Size	Avatar size (1-8)	4	avatar-{size}
IsGroupItem	Whether it's part of a group	false	avatar-group-item
IsParent	Whether it is a parent avatar	false	avatar-parent-child
IsChild	Whether it is a child avatar	false	avatar-child
IsAvatarMore	Indicates a 'more' avatar (+n)	false	avatar-more
IsCircle	Whether the avatar is a circle	true	circle
CustomStyle	Custom inline style	null	-
ClassName	Additional CSS classes	null	-
OnClick	Click event handler	-	-

AvatarGroup Component Options

Available options for AvatarGroup component

Name	Description	Default Value	CSS Class
Images	List of avatar image URLs to display	new List<string>()	-
Size	Avatar size (1-8)	6	avatar-{size}
MaxDisplay	Maximum number of avatars to display	5	-
Link	URL link when using flex style	"#"	-
IsCircle	Whether the avatar is circular	true	circle
UseFlexStyle	Whether to use flex style layout	false	flex-avatar-stack

AvatarPair Component Options

Available options for AvatarPair component

Name	Description	Default Value	CSS Class
PrimaryImage	URL for the primary (larger) avatar image	""	-
SecondaryImage	URL for the secondary (smaller) avatar image	""	-
PrimarySize	Size of the primary avatar (1-8)	6	avatar-{size}
SecondarySize	Size of the secondary avatar (1-8)	2	avatar-{size}

private List<string> AvatarUrls = new()
{
    "https://avatars.githubusercontent.com/u/1?v=4",
    "https://avatars.githubusercontent.com/u/2?v=4",
    "https://avatars.githubusercontent.com/u/3?v=4",
    "https://avatars.githubusercontent.com/u/4?v=4",
    "https://avatars.githubusercontent.com/u/5?v=4",
    "https://avatars.githubusercontent.com/u/6?v=4"
};