Avatar item

An avatar item is a wrapper that goes around an avatar when it's displayed alongside text, such as a name or status.

Examples Code Changelog

Props

`avatar`
Required
Description	Slot to place an avatar element. Use @atlaskit/avatar.
Type	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`

`backgroundColor`
Description	Change background color.
Type	`string`

`href`
Description	URL for avatars being used as a link.
Type	`string`

`isDisabled`
Description	Disable the item from being interactive.
Type	`boolean`

`isTruncationDisabled`
Description	By default, overflowing text is truncated if it exceeds the container width. Use this prop to disable this.
Type	`boolean`

`label`
Description	Used to provide better content to screen readers when using presence/status. Rather than a screen reader speaking "online, approved, John Smith", passing in an label allows a custom message like "John Smith (approved and online)".
Type	`string`

`onClick`
Description	Handler to be called on click.
Type	`(event: MouseEvent<Element, globalThis.MouseEvent>, analyticsEvent?: UIAnalyticsEvent) => void`

`primaryText`
Description	PrimaryText text.
Type	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`

`ref`
Description	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}
Type	`string \| Ref<HTMLElement>`

`secondaryText`
Description	SecondaryText text.
Type	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`

`target`
Description	Pass target down to the anchor, if href is provided.
Type	`"_blank" \| "_self" \| "_top" \| "_parent"`

`testId`
Description	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.
Type	`string`

Was this page helpful?

We use this feedback to improve our documentation.