Avatar

A photo, initials or an icon.

An interactive page: C# runs over a Blazor Server connection.

A picture of a person or thing: an image, else initials from Name, else an icon. When the image fails to load, the initials show through, with no script needed.

Usage

razor

<Avatar Name="Grace Hopper" Src="/img/grace.jpg" />
<Avatar Name="Ada Lovelace" Size="AvatarSize.Lg" Status="Status.Success" StatusLabel="Online" />
<Avatar Name="Acme Corp" Square Accent="Accent.Primary" Variant="AvatarVariant.Solid" />

Initials and icons

Use Name for the initials and their color; without one it shows a person icon, and Square suits teams and companies.

Preview Code

Preview

AL KJ L AC

Code

Basics.razor

<Row Gap="4" Align="Align.Center" Wrap Justify="Justify.Center">
    <Avatar Name="Ada Lovelace" />
    <Avatar Name="Katherine Johnson" />
    <Avatar Name="Linus" />
    <Avatar />
    <Avatar Name="Acme Corp" Square Accent="Accent.Primary" Variant="AvatarVariant.Solid" />
</Row>

Colors and variants

Use Variant for Soft or Solid, and Accent for a color other than the one picked from Name.

Preview Code

Preview

AL KJ O I D

Code

Variants.razor

<Stack Gap="3" Align="Align.Center">
    <Row Gap="3" Align="Align.Center" Wrap Justify="Justify.Center">
        <Avatar Name="Ada Lovelace" />
        <Avatar Name="Katherine Johnson" />
        <Avatar Name="Ops" Square Accent="Accent.Neutral" />
        <Avatar Name="Incidents" Square Accent="Accent.Danger" />
        <Avatar Name="Docs" Square Accent='Accent.Of("#0f766e")' />
    </Row>
    <Row Gap="3" Align="Align.Center" Wrap Justify="Justify.Center">
        <Avatar Name="Ada Lovelace" Variant="AvatarVariant.Solid" />
        <Avatar Name="Katherine Johnson" Variant="AvatarVariant.Solid" />
        <Avatar Name="Ops" Square Accent="Accent.Neutral" Variant="AvatarVariant.Solid" />
        <Avatar Name="Incidents" Square Accent="Accent.Danger" Variant="AvatarVariant.Solid" />
        <Avatar Name="Docs" Square Accent='Accent.Of("#0f766e")' Variant="AvatarVariant.Solid" />
    </Row>
</Stack>

Sizes and status

Use Size from Xs to Xl2, and Status with a StatusLabel for a dot in the corner.

Preview Code

Preview

MH MH MH MH MH MH

GH AT AL AC

Code

Sizes.razor

<Stack Gap="5" Align="Align.Center">
    <Row Gap="4" Align="Align.End" Wrap Justify="Justify.Center">
        <Avatar Name="Margaret Hamilton" Size="AvatarSize.Xs" />
        <Avatar Name="Margaret Hamilton" Size="AvatarSize.Sm" />
        <Avatar Name="Margaret Hamilton" />
        <Avatar Name="Margaret Hamilton" Size="AvatarSize.Lg" />
        <Avatar Name="Margaret Hamilton" Size="AvatarSize.Xl" />
        <Avatar Name="Margaret Hamilton" Size="AvatarSize.Xl2" />
    </Row>
    <Row Gap="4" Align="Align.Center" Wrap Justify="Justify.Center">
        <Avatar Name="Grace Hopper" Size="AvatarSize.Lg" Status="Status.Success" StatusLabel="Online" />
        <Avatar Name="Alan Turing" Size="AvatarSize.Lg" Status="Status.Warning" StatusLabel="Away" />
        <Avatar Name="Ada Lovelace" Size="AvatarSize.Lg" Status="Status.Danger" StatusLabel="Busy" />
        <Avatar Name="Acme Corp" Size="AvatarSize.Lg" Square Status="Status.Neutral" StatusLabel="Offline" />
    </Row>
</Stack>

Beside a name

Use Decorative when the name is written beside the avatar, so screen readers don't hear it twice.

Preview Code

Preview

Grace Hopper

grace@example.com

Code

BesideName.razor

<Row Gap="3" Align="Align.Center">
    <Avatar Name="Grace Hopper" Decorative />
    <Stack Gap="0">
        <TextBlock Weight="FontWeight.Medium">Grace Hopper</TextBlock>
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">grace@example.com</TextBlock>
    </Stack>
</Row>

Mode support

What works in each mode, Avatar
Feature	Off	Static	Live
Everything	Yes	Yes	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Accessibility

With a Name, it's an image (role="img") named by the full name; the photo and initials aren't read.
The status dot is hidden; its meaning is read only from StatusLabel, added to the name as "Ada Lovelace (Online)".
Without a Name, it's hidden from screen readers, even with Initials.
Set Decorative when the name is written beside it, so it isn't read twice.

Parameters

Avatar parameters
Prop	Type	Default
`Name`The person's or thing's name: the accessible name, and the source of the initials and of their color.	`string?`
`Src`The image URL.	`string?`
`Initials`Text in place of initials taken from Name, such as "GH" or "+".	`string?`
`Icon`The icon when there's no name.	`IconData?`	`computed`
`Size`Size.	`AvatarSize?`	`computed`
`Square`Rounded corners in place of a circle, for teams, companies and projects.	`bool`	`false`
`Accent`The color of the initials or icon and what's behind them, as Variant uses it: Accent.Primary, Accent.Of("#0d9488") or Accent.Token("success").	`Accent?`
`Variant`AvatarVariant.Soft (the default) tints the background and colors the initials; AvatarVariant.Solid fills it, with initials picked for contrast.	`AvatarVariant`	`AvatarVariant.Soft`
`Status`A dot in the corner, such as Status.Success for online.	`Status?`
`StatusLabel`What the status dot means, for screen readers, such as "Online".	`string?`
`Decorative`Hides the avatar from screen readers, for when the name is already written beside it.	`bool`	`false`

Plus 16 item props and 4 common props.

Full API