Package Exports

@fluentui/react-avatar
@fluentui/react-avatar/lib-commonjs/index.js
@fluentui/react-avatar/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@fluentui/react-avatar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@fluentui/react-avatar

React Avatar components for Fluent UI

The Avatar component represents a person or entity. It displays the person's image, initials, or an icon, and can be either circular or square.

STATUS: WIP 🚧

These are not production-ready components and should never be used in product. This space is useful for testing new components whose APIs might change before final release.

Usage

To import Avatar:

import { Avatar } from '@fluentui/react-avatar';

Once the Avatar component graduates to a production release, the component will be available at:

import { Avatar } from '@fluentui/react-components';

Examples

<Avatar name="Miguel Garcia" />
<Avatar size={72} name="Mona Kane" image="./MonaKane.jpg" />
<Avatar shape="square" icon={<IDBadgeIcon />} />

Displaying a badge:

<Avatar name="Allan Munger" badge={<PresenceBadge status="busy">} />

With active state indication:

<Avatar name="Daisy Phillips" active={true} activeAppearance="ring-shadow" />
<Avatar name="Robin Counts" active={false} activeAppearance="ring-shadow" />