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

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

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { type ReactNode } from 'react';
import { type AppearanceType, type AvatarClickEventHandler, type Presence, type SizeType, type Status } from './types';
export interface AvatarPropTypes {
    /**
     * Indicates the shape of the avatar. Most avatars are circular, but square avatars
     * can be used for 'container' objects.
     */
    appearance?: AppearanceType;
    /**
     * 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`.
     *
     * 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>>;
    /**
     * whether disable aria-labelledby for avatar img
     */
    isDecorative?: boolean;
    /**
     * Defines the loading behaviour of the avatar image. Default value is eager.
     */
    imgLoading?: 'lazy' | 'eager';
    /**
     * Identifies the popup element that the avatar controls.
     * Used when Avatar is a trigger for a popup.
     */
    'aria-controls'?: string;
    /**
     * Announces to assistive technology whether the controlled popup is currently open or closed.
     */
    'aria-expanded'?: boolean;
    /**
     * Informs assistive technology that this element triggers a popup.
     * When set, Avatar will render as a `<button>` element even without `onClick`.
     */
    'aria-haspopup'?: boolean | 'dialog';
}
/**
 * __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)
 */
declare const Avatar: React.ForwardRefExoticComponent<React.PropsWithoutRef<AvatarPropTypes> & React.RefAttributes<HTMLElement>>;
export default Avatar;