@activecollab/components/dist/esm/components/Avatar/Avatar.d.ts

ActiveCollab Components

import React from "react";
export interface AvatarProps extends React.ComponentPropsWithoutRef<"img"> {
    /** Path url. */
    url: string;
    /** Alt text. */
    alt?: string;
    /** Image size. */
    size?: number;
    /** Custom class. */
    className?: string;
    /** img custom class. */
    imgClassName?: string;
}
/**
 * @component Avatar
 * @description
 * The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
 *
 * @prop {url} - The image url of the Avatar.
 * @prop {size} - controls the size of an Avatar (width and height) in pixels.
 * @prop {alt} - alt attribute of the img.
 * @prop {imgClassName} - class name that attaches to img element nested in Wrapper
 *
 * @example
 * <Avatar url="https://faces-img.xcdn.link/image-lorem-face-954.jpg" alt="Profile picture of John" />
 *
 * @example
 * <Avatar
 *   url="https://faces-img.xcdn.link/image-lorem-face-954.jpg"
 *   alt="Profile picture of John">
 *   <Badge size={8} backgroundColor="green" position="bottom-left" />
 * </Avatar>
 *
 * @see
 * https://system.activecollab.com/?path=/story/components-button-indicators-avatar--avatar
 * @see
 * https://design.activecollab.com/docs/components/avatar
 */
export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & {
    children?: React.ReactNode;
} & React.RefAttributes<HTMLImageElement>>;
//# sourceMappingURL=Avatar.d.ts.map