Avatar Component
Image avatars
Six sizes with image source
xs
sm
md
lg
xl
2xlrazor
@* 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)
Two-letter initials fallback
OR
xs
OR
sm
OR
md
OR
lg
OR
xl
OR
2xl
razor
<Avatar Initials="OR" Size="xs" Color="brand" />
<Avatar Initials="OR" Size="md" Color="brand" />
<Avatar Initials="OR" Size="2xl" Color="brand" />Color variants
Tinted backgrounds
AB
gray
AB
brand
AB
error
AB
success
AB
warning
razor
@* 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
Image + status dot
razor
<Avatar Src="/avatar.jpg"
Alt="Online user"
Size="md"
ShowStatus="true"
StatusColor="success" />Initials + status dot
JDJDJDJDJDJD
razor
<Avatar Initials="JD"
Size="md"
Color="brand"
ShowStatus="true"
StatusColor="success" />Status dot colors
Four presence states
JD
success
JD
warning
JD
error
JD
gray
razor
@* 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)
No image, no initials
xs
sm
md
lg
xl
2xl
razor
@* No Src and no Initials → renders a generic silhouette *@
<Avatar Size="md" Color="gray" />Shape variants
Square (rounded corners) with image
xs
sm
md
lg
xl
2xlrazor
@* Shape: "circle" (default) | "square" *@
<Avatar Src="https://example.com/avatar.jpg" Alt="Olivia Rhye" Size="md" Shape="square" />Square (rounded corners) with initials
OR
xs
OR
sm
OR
md
OR
lg
OR
xl
OR
2xl
razor
<Avatar Initials="OR" Size="md" Color="brand" Shape="square" />Square + status dot
JDJDJDJDJDJD
razor
<Avatar Initials="JD" Size="md" Color="brand"
Shape="square" ShowStatus="true" StatusColor="success" />