Feedback
TwAvatar
TwAvatar is a Blazor avatar component that shows a picture, initials or an icon for a person. Set Src, Name, Initials, Icon, Color and Size.
Last updated
Basic usage
Give
TwAvatar a Name and it shows that person's initials: the first letters of the first and last words. The name also labels the avatar for assistive technology.JD
MS
C
RAZOR
<div class="flex items-center gap-4">
<TwAvatar Name="Jane Doe" />
<TwAvatar Name="Mary Anne Smith" />
<TwAvatar Name="Cher" />
</div>Picture
Set
Src to show a picture, cropped to the avatar's shape. If the picture fails to load, the avatar falls back to the initials, so keep the Name alongside it.
RAZOR
<div class="flex items-center gap-4">
<TwAvatar Src="_content/TwBlazor.Docs/images/logo.svg" Name="twblazor" />
<TwAvatar Src="/images/missing-picture.png" Name="Jane Doe" Color="Color.Primary" />
</div>Initials
Set
Initials to choose the letters yourself, for example when the name is not a person's.DS
QA
RAZOR
<div class="flex items-center gap-4">
<TwAvatar Name="Design Team" Initials="DS" Color="Color.Accent" />
<TwAvatar Name="Quality Assurance" Initials="QA" Color="Color.Success" />
</div>Icon
With no picture and no initials the avatar shows an icon. Set
Icon to change it.RAZOR
<div class="flex items-center gap-4">
<TwAvatar AriaLabel="Guest" />
<TwAvatar AriaLabel="Support bot" Icon="Icon.Robot" Color="Color.Info" />
<TwAvatar AriaLabel="Acme Ltd" Icon="Icon.Building" Color="Color.Dark" />
</div>Sizes
Use
Size to set the avatar's dimensions. The initials and icon scale with it.JD
JD
JD
JD
RAZOR
<div class="flex items-center gap-4">
<TwAvatar Name="Jane Doe" Color="Color.Primary" Size="AvatarSize.Small" />
<TwAvatar Name="Jane Doe" Color="Color.Primary" Size="AvatarSize.Medium" />
<TwAvatar Name="Jane Doe" Color="Color.Primary" Size="AvatarSize.Large" />
<TwAvatar Name="Jane Doe" Color="Color.Primary" Size="AvatarSize.ExtraLarge" />
</div>Colors
Use
Color to set the background behind the initials or icon. Without one the avatar is a neutral gray.NCPAAASADAWAIALADA
RAZOR
<div class="flex flex-wrap items-center gap-4">
<TwAvatar Name="No Color" />
@foreach (var color in Enum.GetValues<Color>())
{
<TwAvatar Name="@($"{color} Avatar")" Color="@color" />
}
</div>Shape
Avatars are round by default. Set
Rounded for a different shape.JD
JD
JD
RAZOR
<div class="flex items-center gap-4">
<TwAvatar Name="Jane Doe" Color="Color.Primary" Rounded="Rounded.Full" />
<TwAvatar Name="Jane Doe" Color="Color.Primary" Rounded="Rounded.Lg" />
<TwAvatar Name="Jane Doe" Color="Color.Primary" Rounded="Rounded.None" />
</div>Beside a name
When the name is written next to the avatar, leave
Name off and pass Initials instead. The avatar is then decoration and is hidden from assistive technology, so the name is not read out twice.Jane Doe
Product Designer
RAZOR
<div class="flex items-center gap-3">
<TwAvatar Initials="JD" Color="Color.Primary" Size="AvatarSize.Large" />
<div>
<p class="font-semibold">Jane Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Product Designer</p>
</div>
</div>Accessibility
An avatar with a
Name or an AriaLabel is exposed as an image with that name, whether it shows a picture, initials or an icon. An avatar with neither is hidden from assistive technology. Give every avatar that stands on its own a name, and leave it off only when the same name is already in the text beside it.
Theme configuration
Styling is controlled by
TwBlazorTheme.Components (a TwAvatarTheme), configured via the
AddTwBlazor() options callback described on the Get Started page.
Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.
Global Theme Configuration
These reuse shared design tokens configured once on
TwBlazorTheme, rather than being unique to this component.
| Property | Type | Controls |
|---|---|---|
Colors |
TwBlazorPalette |
Full reference: TwAvatarTheme on the API docs.