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.
To import Avatar:
import { Avatar } from '@fluentui/react-components';
<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.
See SPEC.md.
If you're upgrading to Fluent UI v9 see MIGRATION.md for guidance on updating to the latest Avatar implementation.