@fluentui/react-avatar

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

Similar packages

Other packages similar to @fluentui/react-avatar

react-avatar

react-avatar is a versatile avatar component library for React. It supports various avatar types, including initials, images, and icons. Compared to @fluentui/react-avatar, react-avatar offers more flexibility in terms of avatar types and customization options.

material-ui

Material-UI is a popular React component library that follows Google's Material Design guidelines. It includes an Avatar component that supports images, icons, and text. While Material-UI provides a broader range of UI components, its Avatar component is similar in functionality to @fluentui/react-avatar.

antd

Ant Design (antd) is a comprehensive UI component library for React. It includes an Avatar component that supports images, icons, and text. Ant Design's Avatar component is comparable to @fluentui/react-avatar in terms of features and customization options.