Avatar

Import statement

import { Avatar } from "@wfp/react"

Usage

In this example, the Avatar component displays the image from the provided URL.

<Avatar image="user-image-url.jpg" name="John Doe" alt="John Doe’s Avatar" />

Component behaviour

• Default Icon: If the image prop is not provided and missingImage is set to "avatar", a default user icon is displayed.
• Initial Letter: If the image prop is undefined and missingImage is "letter", an SVG with the user’s initial letter is rendered.
• Custom Image: If the image prop is provided, it is displayed as the user’s avatar.

Styling

• The component utilizes a CSS class naming scheme based on a prefix obtained from the useSettings hook. This prefix is prepended to various CSS class names for consistent styling across the design system.

Accessibility

• The alt prop should be used to provide descriptive alternative text for the avatar image, enhancing accessibility for screen reader users.

missingImage prop

Default avatar

If the URL is not available, it falls back to the default user icon.

<Avatar
  alt="user’s name"
  missingImage="avatar"
  name="Jane Doe"
/>;

Letter

In this case the alt text the user’s name "Albert Doe" is used for generating the initial in the fallback letter mode.

<Avatar
  alt="user’s name"
  missingImage="letter"
  name="Albert Doe"
/>;