What does an Avatar display when no image is provided?

When there is no image, the Avatar shows the initials derived from the name prop. If neither an image nor initials are available, it can display an icon instead.

How does the colorful color option pick a color?

Setting color to "colorful" automatically picks a color based on the name prop. When a name is unavailable, idForColor can be used to determine the color from another unique identifier.

How do I show a presence status on an Avatar?

Pass a badge object such as badge={{ status: "available" }} to display a presence badge. See the PresenceBadge component for the available statuses.

Avatar

An Avatar is a graphical representation of a user, team, or entity.

Avatar can display an image, icon, or initials, and supports different sizes, shapes, and status indicators.

Usage

<script>
	import { Avatar } from 'fluentui-svelte';
</script>

<Avatar size={40} name="FluentUI Svelte" />

Component API

A brief explanation of the props that really need explaining. You can see the rest of the props here.

Image

An avatar can display an image. It is recommended to also include a name in addition to the image: the initials from the name are displayed while the image is loading, and the name makes the Avatar accessible to screen readers.

View Code

Icon

An avatar can display an icon. The icon will only be shown when there is no image or initials available.

View Code

Badge

An avatar can have a badge to indicate presence status. See the PresenceBadge component for more info.

View Code

Shape

An avatar can have a square, circular, or rounded shape.

View Code

Color: colorful

An avatar can have its color automatically picked based on the name prop, or idForColor can be used if a name is not available.

View Code

Component Props

Name	Type	Description
`name`	`string`	The name of the person or entity represented by this Avatar. Used to determine initials and for accessibility tools.
`image`	`{ src: string }`	The Avatar image. It can only be a single image URL.
`ref`	`HTMLDivElement`	The DOM reference of the avatar element.
`size`	`number`	Size of the avatar in pixels.
`shape`	`string`	The shape of the avatar. Possible values: 'circular', 'rounded', 'square'.
`color`	`string`	The color used when displaying either an icon or initials. Supports system colors. Possible values: 'information', 'attention', 'warning', 'success', 'critical', 'colorful'.
`active`	`string`	Optional activity indicator. Possible values: 'active', 'inactive'. Active decorates the avatar according to activeAppearance. Inactive reduces size and makes it partially transparent.
`activeAppearance`	`string`	The appearance used when active is set to active. Possible values: 'ring', 'shadow', 'ring-shadow'.
`initials`	`string`	Custom initials. By default, initials are derived from the name prop using the getInitials function. They are displayed when there is no image.
`idForColor`	`string`	A string used instead of the name to determine the color when color is set to colorful. Useful when a name is unavailable but another unique identifier exists.
`icon`	`Snippet` \| `Component`	The icon to display when the avatar does not have an image or initials.
`badge`	`object`	The badge to display as a status indicator. It can include a custom icon.