@fluentui/react-avatar

What is @fluentui/react-avatar?

@fluentui/react-avatar is a React component library for creating and displaying avatars. It is part of the Fluent UI suite, which provides a consistent design language and components for building user interfaces. The package allows for customization and styling of avatars, including support for different sizes, shapes, and image sources.

What are @fluentui/react-avatar's main functionalities?

Basic Avatar

This feature allows you to create a basic avatar with a name. The avatar will display the initials of the name provided.

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

function BasicAvatar() {
  return <Avatar name="John Doe" />;
}

Avatar with Image

This feature allows you to create an avatar with a custom image. You can provide the image source URL to display a specific image.

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

function AvatarWithImage() {
  return <Avatar image={{ src: 'https://example.com/johndoe.jpg' }} name="John Doe" />;
}

Avatar Sizes

This feature allows you to create avatars of different sizes. You can specify the size in pixels to adjust the avatar's dimensions.

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

function AvatarSizes() {
  return (
    <div>
      <Avatar name="John Doe" size={24} />
      <Avatar name="John Doe" size={48} />
      <Avatar name="John Doe" size={72} />
    </div>
  );
}

Avatar Shapes

This feature allows you to create avatars with different shapes. You can choose between 'square' and 'circular' shapes.

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

function AvatarShapes() {
  return (
    <div>
      <Avatar name="John Doe" shape="square" />
      <Avatar name="John Doe" shape="circular" />
    </div>
  );
}

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.

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.

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:

1. yarn start
2. 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.