@atlaskit/avatar/dist/types/avatar.d.ts

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

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { type PropsWithoutRef, type ReactNode, type RefAttributes } from 'react';
import type { TriggerAriaProps } from '@atlaskit/popup/types';
import { type AppearanceType, type AvatarClickEventHandler, type Presence, type SizeType, type Status } from './types';
/**
 * Popup trigger ARIA attributes are optional. Use `aria-controls` to identify
 * the popup and `aria-expanded` to announce whether it is open. An
 * `aria-haspopup` value indicating a popup renders Avatar as a button,
 * even when `onClick` is absent.
 */
export interface AvatarPropTypes extends Partial<TriggerAriaProps> {
    /**
     * Indicates the shape of the avatar. Most avatars are circular, but square avatars
     * can be used for 'container' objects.
     */
    appearance?: AppearanceType;
    /**
     * Selects an experimental taller hexagon geometry for 16px, 24px, 32px, 40px, 96px, and 128px
     * avatars. The 20px size retains the legacy geometry.
     */
    UNSAFE_isUpdatedGeometry?: boolean;
    /**
     * 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)".
     */
    label?: string;
    /**
     * Used to override the default border color around the avatar body.
     * Accepts any color argument that the border-color CSS property accepts.
     */
    borderColor?: string;
    /**
     * Supply a custom avatar component instead of the default.
     */
    children?: ReactNode;
    /**
     * Provides a url for avatars being used as a link.
     */
    href?: string;
    /**
     * Change the style to indicate the avatar is disabled.
     */
    isDisabled?: boolean;
    /**
     * Provides alt text for the avatar image.
     */
    name?: string;
    /**
     * 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%.
     */
    presence?: Presence | Omit<ReactNode, string> | (string & {}) | null;
    /**
     * Defines the size of the avatar. Default value is `medium`.
     *
     * Available sizes (in pixels): `xxsmall` (16), `small` (24), `medium` (32),
     * `large` (40), `xlarge` (96), `xxlarge` (128).
     *
     * The `xsmall` size is deprecated. Use `xxsmall` for 16px avatars.
     *
     * The `UNSAFE_xsmall` (20px) size is an unsafe, transitional value and is
     * intentionally not documented for general use — see `SizeType`.
     *
     * This can also be controlled by the `size` property of the
     * `AvatarContext` export from this package. If no prop is given when the
     * `size` is set via this context, the context's value will be used.
     */
    size?: SizeType;
    /**
     * A url to load an image from (this can also be a base64 encoded image).
     */
    src?: string;
    /**
     * Indicates contextual information by showing a small icon on the avatar.
     * Refer to status values on the Status component.
     */
    status?: Status | Omit<ReactNode, string> | (string & {}) | null;
    /**
     * The index of where this avatar is in the group `stack`.
     */
    stackIndex?: number;
    /**
     * Assign specific tabIndex order to the underlying node.
     */
    tabIndex?: number;
    /**
     * Pass target down to the anchor, if href is provided.
     */
    target?: '_blank' | '_self' | '_top' | '_parent';
    /**
     * Handler to be called on click.
     */
    onClick?: AvatarClickEventHandler;
    /**
     * 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.
     */
    testId?: string;
    /**
     * Analytics context meta data.
     */
    analyticsContext?: Record<string, any>;
    /**
     * Replace the wrapping element. This accepts the name of a html tag which will
     * be used to wrap the element.
     */
    as?: keyof JSX.IntrinsicElements | React.ComponentType<React.AllHTMLAttributes<HTMLElement>>;
    /**
     * Defines the loading behaviour of the avatar image. Default value is eager.
     */
    imgLoading?: 'lazy' | 'eager';
}
/**
 * __Avatar__
 *
 * An avatar is a visual representation of a user or entity.
 *
 * - [Examples](https://atlassian.design/components/avatar/examples)
 * - [Code](https://atlassian.design/components/avatar/code)
 * - [Usage](https://atlassian.design/components/avatar/usage)
 */
type AvatarPropsWithoutDeprecatedSize = Omit<AvatarPropTypes, 'size'> & {
    size?: Exclude<SizeType, 'xsmall'>;
};
interface AvatarComponent {
    (props: PropsWithoutRef<AvatarPropsWithoutDeprecatedSize> & RefAttributes<HTMLElement>): ReactNode;
    /**
     * @deprecated Use `xxsmall` for 16px avatars.
     */
    (props: PropsWithoutRef<AvatarPropTypes> & RefAttributes<HTMLElement>): ReactNode;
    displayName?: string;
}
declare const Avatar: AvatarComponent;
export default Avatar;