@wix/design-system/dist/types/Avatar/index.d.ts

@wix/design-system

import * as React from 'react';

export interface AvatarProps {
  /** Controls the shape of the image.
   * @default 'circle'
   */
  shape?: 'circle' | 'square';
  /** Controls the size of an avatar.
   * @default 'size48'
   */
  size?:
    | 'size90'
    | 'size72'
    | 'size60'
    | 'size48'
    | 'size36'
    | 'size30'
    | 'size24'
    | 'size18';
  /** Specifies a CSS class name to be appended to the component’s root element.
   * @internal
   */
  className?: string;
  /** Sets the presence status of an avatar. */
  presence?: 'online' | 'offline' | 'busy';
  /** Accept any content to render as an indication item. */
  indication?: React.ReactNode;
  /**
   * Accept any content to render as a custom indication item. This indication element will not be wrapped by an IconButton.
   * It could be rendered in other shapes (such as square).
   * */
  customIndication?: React.ReactNode;
  /** Shows indication element on hover.
   * @default false
   */
  showIndicationOnHover?: boolean;
  /** Defines a callback function which is called every time indication element is clicked. */
  onIndicationClick?(): void;
  /** Shows a loader on top of an avatar. */
  loading?: boolean;
  /** Defines a string that labels the current element in case where text label is not visible on the screen. */
  ariaLabel?: string;
  /**
   * Controls the background color of the avatar. If not provided,
   * color is determined by the provided text or name so that each name will receive a different color.
   */
  color?: 'A1' | 'A2' | 'A3' | 'A4' | 'A5' | 'A6' | 'A7';
  /** Accept all common `<img>` tag properties. */
  imgProps?: React.ImgHTMLAttributes<HTMLImageElement>;
  /**
   * Defines a name of the avatar user. Text initials will be generated from the name.
   * The name value will be used as default value for HTML title and `aria-label` attributes.
   * And also as default value for the image's alt attribute if `imgProps` is provided.
   */
  name?: string;
  /** Defines a text to render as a content instead of a given `name`. */
  text?: string;
  /** Defines a click event handler. When defined, component will be clickable and will have a pointer cursor on hover. */
  onClick?(): void;
  /**
   * Accept any content to render as a content placeholder. This placeholder will be displayed if no text, name or imgProps are provided.<br>
   * By default use a generic avatar user icon.
   */
  placeholder?: React.ReactNode;
  /** Defines a standard HTML title attribute value. Applies it to the root element. */
  title?: string;
  /** Applies a data-hook HTML attribute that can be used in the tests. */
  dataHook?: string;
}

declare const Avatar: React.FC<AvatarProps>;
export default Avatar;