Analytics context meta data.

Indicates the shape of the avatar. Most avatars are circular, but square avatars can be used for 'container' objects.

Identifies the popup element that the trigger controls. Should match the id of the popup content for screen readers to understand the relationship.

Announces to assistive technology whether the popup is currently open or closed.

Informs assistive technology that this element triggers a popup.

Replace the wrapping element. This accepts the name of a html tag which will be used to wrap the element.

Used to override the default border color around the avatar body. Accepts any color argument that the border-color CSS property accepts.

Supply a custom avatar component instead of the default.

Provides a url for avatars being used as a link.

Defines the loading behaviour of the avatar image. Default value is eager.

Change the style to indicate the avatar is disabled.

Used to provide custom content to screen readers. Status or presence is not added to the label by default if it passed as nodes. If status or presence is passed as a string, the default content format is "John Smith (online)".

Provides alt text for the avatar image.

Handler to be called on click.

Indicates a user's online status by showing a small icon on the avatar. Refer to presence values on the presence component. Alternatively accepts any React element. For best results, it is recommended to use square content with height and width of 100%.

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}

A url to load an image from (this can also be a base64 encoded image).

The index of where this avatar is in the group stack.

Indicates contextual information by showing a small icon on the avatar. Refer to status values on the Status component.

Assign specific tabIndex order to the underlying node.

Pass target down to the anchor, if href is provided.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests.

Selects an experimental taller hexagon geometry for 16px, 24px, 32px, 40px, 96px, and 128px avatars. The 20px size retains the legacy geometry.