Skip to main content

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

Additional resources