Skip to main content
Version: 1.x

fast-avatar

The fast-avatar component is used to graphically represent a user or an object.

Setup

Basic Setup

import {
provideFASTDesignSystem,
fastAnchoredRegion
} from "@microsoft/fast-components";

provideFASTDesignSystem()
.register(
fastAvatar()
);

Custom Media

import { Avatar } from "@microsoft/fast-foundation";
import {
provideFASTDesignSystem,
fastAnchoredRegion
} from "@microsoft/fast-components";

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

provideFASTDesignSystem()
.register(
fastAvatar({
media: imgTemplate
})
);

Usage

Basic Usage

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

Used with a Badge

<fast-avatar
src="..."
alt="..."
link="...">
<fast-badge slot="badge">&nbsp</fast-badge>
</fast-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.

fast-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:

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

Create your own design

import {
AvatarOptions,
Avatar,
avatarTemplate as template,
} from "@microsoft/fast-foundation";
import { avatarStyles as styles } from "./my-avatar.styles";

export const myAvatar = Avatar.compose<AvatarOptions>({
baseName: "avatar",
template,
styles,
media: imgTemplate,
shadowOptions: {
delegatesFocus: true,
},
});
note

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

API

class: Avatar

Superclass

NameModulePackage
FoundationElement/src/foundation-element/foundation-element.js

Fields

NamePrivacyTypeDefaultDescriptionInherited From
fillpublicstringIndicates the Avatar should have a color fill.
colorpublicstringIndicates the Avatar should have a text color.
linkpublicstringIndicates the Avatar should have url link
shapepublicAvatarShapeIndicates the Avatar shape should be. By default it will be set to "circle".
$presentationpublicComponentPresentation or nullA property which resolves the ComponentPresentation instance for the current component.FoundationElement
templatepublicElementViewTemplate or void or nullSets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.FoundationElement
stylespublicElementStyles or void or nullSets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.FoundationElement

Methods

NamePrivacyDescriptionParametersReturnInherited From
templateChangedprotectedvoidFoundationElement
stylesChangedprotectedvoidFoundationElement

Attributes

NameFieldInherited From
fillfill
colorcolor
linklink
shapeshape

CSS Parts

NameDescription
backplateThe wrapping container for the avatar
linkThe avatar link
mediaThe media slot
contentThe default slot

Slots

NameDescription
mediaUsed for media such as an image
The default slot for avatar text, commonly a name or initials
badgeUsed to provide a badge, such as a status badge

Additional resources