History

Trinh Ngoc Tu 6a1f89adeb First version with simple frontend and Compose Email by AI		2024-11-29 21:36:41 +01:00
..
dist	First version with simple frontend and Compose Email by AI	2024-11-29 21:36:41 +01:00
lib	First version with simple frontend and Compose Email by AI	2024-11-29 21:36:41 +01:00
lib-commonjs	First version with simple frontend and Compose Email by AI	2024-11-29 21:36:41 +01:00
CHANGELOG.md	First version with simple frontend and Compose Email by AI	2024-11-29 21:36:41 +01:00
LICENSE	First version with simple frontend and Compose Email by AI	2024-11-29 21:36:41 +01:00
package.json	First version with simple frontend and Compose Email by AI	2024-11-29 21:36:41 +01:00
README-AvatarGroup.md	First version with simple frontend and Compose Email by AI	2024-11-29 21:36:41 +01:00
README.md	First version with simple frontend and Compose Email by AI	2024-11-29 21:36:41 +01:00

README.md

@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.

Usage

To import Avatar:

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" />

See Fluent UI Storybook for more detailed usage examples.

Alternatively, run Storybook locally with:

yarn start
Select react-avatar from the list.

Specification

See SPEC.md.

Migration Guide

If you're upgrading to Fluent UI v9 see MIGRATION.md for guidance on updating to the latest Avatar implementation.