@atlaskit/avatar/report.api.md

An avatar is a visual representation of a user or entity.

<!-- API Report Version: 2.3 -->

## API Report File for "@atlaskit/avatar"

> Do not edit this file. This report is auto-generated using
> [API Extractor](https://api-extractor.com/).
> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)

### Table of contents

- [Main Entry Types](#main-entry-types)
- [Peer Dependencies](#peer-dependencies)

### Main Entry Types

<!--SECTION START: Main Entry Types-->

```ts
/// <reference types="react" />

import { FC } from 'react';
import { ForwardRefExoticComponent } from 'react';
import { MouseEventHandler } from 'react';
import { ReactNode } from 'react';
import { Ref } from 'react';
import { RefAttributes } from 'react';
import { UIAnalyticsEvent } from '@atlaskit/analytics-next';

// @public (undocumented)
export const ACTIVE_SCALE_FACTOR = 0.9;

// @public (undocumented)
export type AppearanceType = 'circle' | 'square';

// @public
const Avatar: ForwardRefExoticComponent<AvatarPropTypes & RefAttributes<HTMLElement>>;
export default Avatar;

// @public (undocumented)
export const AVATAR_RADIUS: AvatarSizeMap;

// @public (undocumented)
export const AVATAR_SIZES: AvatarSizeMap;

// @public (undocumented)
export type AvatarClickEventHandler = (
	event: React.MouseEvent,
	analyticsEvent?: UIAnalyticsEvent,
) => void;

// @public
export const AvatarItem: ForwardRefExoticComponent<AvatarItemProps & RefAttributes<HTMLElement>>;

// @public (undocumented)
export interface AvatarItemProps {
	avatar: ReactNode;
	backgroundColor?: string;
	children?: (props: CustomAvatarItemProps) => ReactNode;
	href?: string;
	isDisabled?: boolean;
	isTruncationDisabled?: boolean;
	label?: string;
	onClick?: AvatarClickEventHandler;
	primaryText?: ReactNode;
	secondaryText?: ReactNode;
	target?: '_blank' | '_parent' | '_self' | '_top';
	testId?: string;
}

// @public (undocumented)
export interface AvatarPropTypes {
	analyticsContext?: Record<string, any>;
	appearance?: AppearanceType;
	as?: React.ComponentType<React.AllHTMLAttributes<HTMLElement>> | keyof JSX.IntrinsicElements;
	borderColor?: string;
	children?: (props: CustomAvatarProps) => ReactNode;
	href?: string;
	isDisabled?: boolean;
	label?: string;
	name?: string;
	onClick?: AvatarClickEventHandler;
	presence?: (string & {}) | Omit<ReactNode, string> | PresenceType | null;
	size?: SizeType;
	src?: string;
	stackIndex?: number;
	status?: (string & {}) | Omit<ReactNode, string> | StatusType | null;
	tabIndex?: number;
	target?: '_blank' | '_parent' | '_self' | '_top';
	testId?: string;
}

// @public (undocumented)
type AvatarSizeMap = Record<SizeType, number>;

// @public (undocumented)
export const BORDER_WIDTH = 2;

// @public (undocumented)
export interface CustomAvatarItemProps {
	// (undocumented)
	'aria-disabled'?: 'false' | 'true' | boolean | undefined;
	'aria-label'?: string;
	// (undocumented)
	children: ReactNode;
	// (undocumented)
	className?: string;
	// (undocumented)
	href?: string;
	// (undocumented)
	onClick?: MouseEventHandler;
	// (undocumented)
	ref: Ref<HTMLElement>;
	// (undocumented)
	testId?: string;
}

// @public (undocumented)
export interface CustomAvatarProps {
	'aria-label'?: string;
	// (undocumented)
	children: ReactNode;
	// (undocumented)
	className?: string;
	// (undocumented)
	href?: string;
	// (undocumented)
	onClick?: MouseEventHandler;
	// (undocumented)
	ref: Ref<HTMLElement>;
	// (undocumented)
	tabIndex?: number;
	// (undocumented)
	testId?: string;
}

// @public (undocumented)
export type IndicatorSizeType = 'large' | 'medium' | 'small' | 'xlarge';

// @public
export const Presence: FC<PresenceProps>;

// @public (undocumented)
export interface PresenceProps {
	borderColor?: string;
	children?: ReactNode;
	presence?: PresenceType;
	testId?: string;
}

// @public (undocumented)
export type PresenceType = 'busy' | 'focus' | 'offline' | 'online';

// @public (undocumented)
export type SizeType = 'large' | 'medium' | 'small' | 'xlarge' | 'xsmall' | 'xxlarge';

// @public
export const Skeleton: FC<SkeletonProps>;

// @public (undocumented)
export interface SkeletonProps {
	// (undocumented)
	appearance?: AppearanceType;
	// (undocumented)
	color?: string;
	// (undocumented)
	size?: SizeType;
	// (undocumented)
	weight?: 'normal' | 'strong';
}

// @public
export const Status: FC<StatusProps>;

// @public (undocumented)
export interface StatusProps {
	borderColor?: string;
	children?: ReactNode;
	status?: StatusType;
}

// @public (undocumented)
export type StatusType = 'approved' | 'declined' | 'locked';

// (No @packageDocumentation comment for this package)
```

<!--SECTION END: Main Entry Types-->

### Peer Dependencies

<!--SECTION START: Peer Dependencies-->

```json
{
	"react": "^16.8.0"
}
```

<!--SECTION END: Peer Dependencies-->