Avatar Component

Go back

Image avatars

2xl

@* Sizes: xs, sm, md, lg, xl, 2xl *@
<Avatar Src="https://example.com/avatar.jpg" Alt="Olivia Rhye" Size="xs" />
<Avatar Src="https://example.com/avatar.jpg" Alt="Olivia Rhye" Size="md" />
<Avatar Src="https://example.com/avatar.jpg" Alt="Olivia Rhye" Size="2xl" />

Placeholder avatars (initials)

OR xs

OR sm

OR md

OR lg

OR xl

OR 2xl

<Avatar Initials="OR" Size="xs" Color="brand" />
<Avatar Initials="OR" Size="md" Color="brand" />
<Avatar Initials="OR" Size="2xl" Color="brand" />

Color variants

AB gray

AB brand

AB error

AB success

AB warning

@* Colors: gray, brand, error, success, warning *@
<Avatar Initials="AB" Size="lg" Color="gray" />
<Avatar Initials="AB" Size="lg" Color="brand" />
<Avatar Initials="AB" Size="lg" Color="success" />
<Avatar Initials="AB" Size="lg" Color="error" />
<Avatar Initials="AB" Size="lg" Color="warning" />

With status indicator

<Avatar Src="/avatar.jpg"
        Alt="Online user"
        Size="md"
        ShowStatus="true"
        StatusColor="success" />

JDJDJDJDJDJD

<Avatar Initials="JD"
        Size="md"
        Color="brand"
        ShowStatus="true"
        StatusColor="success" />

Status dot colors

JD success

JD warning

JD error

JD gray

@* StatusColor values: success, warning, error, gray *@
<Avatar Initials="JD" Size="lg" ShowStatus="true" StatusColor="success" />
<Avatar Initials="JD" Size="lg" ShowStatus="true" StatusColor="warning" />
<Avatar Initials="JD" Size="lg" ShowStatus="true" StatusColor="error" />
<Avatar Initials="JD" Size="lg" ShowStatus="true" StatusColor="gray" />

Fallback (generic icon)

2xl

@* No Src and no Initials → renders a generic silhouette *@
<Avatar Size="md" Color="gray" />

Shape variants

2xl

@* Shape: "circle" (default) | "square" *@
<Avatar Src="https://example.com/avatar.jpg" Alt="Olivia Rhye" Size="md" Shape="square" />

OR xs

OR sm

OR md

OR lg

OR xl

OR 2xl

<Avatar Initials="OR" Size="md" Color="brand" Shape="square" />

JDJDJDJDJDJD

<Avatar Initials="JD" Size="md" Color="brand"
        Shape="square" ShowStatus="true" StatusColor="success" />