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

Name	Module	Package
FoundationElement	/src/foundation-element/foundation-element.js

Fields

Name	Privacy	Type	Default	Description	Inherited From
fill	public	string		Indicates the Avatar should have a color fill.
color	public	string		Indicates the Avatar should have a text color.
link	public	string		Indicates the Avatar should have url link
shape	public	AvatarShape		Indicates the Avatar shape should be. By default it will be set to "circle".
$presentation	public	ComponentPresentation or null		A property which resolves the ComponentPresentation instance for the current component.	FoundationElement
template	public	ElementViewTemplate or void or null		Sets 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
styles	public	ElementStyles or void or null		Sets 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

Name	Privacy	Description	Parameters	Return	Inherited From
templateChanged	protected			void	FoundationElement
stylesChanged	protected			void	FoundationElement

Attributes

Name	Field	Inherited From
fill	fill
color	color
link	link
shape	shape

CSS Parts

Name	Description
backplate	The wrapping container for the avatar
link	The avatar link
media	The media slot
content	The default slot

Slots

Name	Description
media	Used for media such as an image
	The default slot for avatar text, commonly a name or initials
badge	Used to provide a badge, such as a status badge

---

Additional resources

• Component explorer examples
• Component technical specification
• Open UI Analysis