fluent-avatar

2025-05-13

The fluent-avatar component is used to graphically represent a user.

Setup

import {
    provideFluentDesignSystem,
    fluentAnchoredRegion
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentAvatar()
    );

Custom media

import { Avatar } from "@fluentui/fast-foundation";
import {
    provideFluentDesignSystem,
    fluentAnchoredRegion
} from "@fluentui/web-components";

const imgTemplate = html<Avatar>`
    ...your own template that controls rendering images...
`;

provideFluentDesignSystem()
    .register(
        fluentAvatar({
          media: imgTemplate
        })
    );

Basic markup

<fluent-avatar 
  src="..."
  alt="..."
  link="...">
</fluent-avatar>

With a badge

<fluent-avatar
  src="..." 
  alt="..."
  link="...">
  <fluent-badge slot="badge">&nbsp</fluent-badge>
</fluent-avatar>

Filled, colored and shaped

The fill and color attributes of the avatar create CSS custom properties which can be used to style the control.

fluent-avatar {
    --avatar-fill-primary: #00FF00;
    --avatar-fill-danger: #FF0000;
    --avatar-color-light: #FFFFFF;
    --avatar-color-dark: #000000;
}

While the shape attribute lets you choose between circle (default) or square:

<fluent-avatar 
  src="..."
  alt="..."
  link="..."
  fill="primary"
  color="dark"
  shape="square">
</fluent-avatar>

Example

Note

This component is built with the expectation that focus is delegated to the anchor element rendered into the shadow DOM.

Additional Resources

Code in GitHub

Please see the Blazor documentation and demo site for more information.

Share via