@octopusdeploy/design-system-components/dist/src/components/Avatar/Avatar.d.ts

The design systems component library.

import type React from "react";
export type AvatarSize = "large" | "medium" | "small";
export interface AvatarProps {
    className?: string;
    size: AvatarSize;
    src?: string;
    srcSet?: string;
    alt?: string;
    href?: string;
    hasEditOverlay?: boolean;
    isMuted?: boolean;
    fallback: React.ReactNode;
    shape: AvatarShape;
    title?: string;
}
export type AvatarShape = "circle" | "rounded";
/**
 * The base component for rendering an avatar.
 * Handles image loading, fallback rendering, and wrapper behavior.
 *
 * @param {string} [props.className] - Additional CSS styles to apply to the avatar.
 * @param {object} props - The component props.
 * @param {AvatarSize} props.size - The size of the avatar (small, medium, large).
 * @param {string} [props.src] - The source URL for the avatar image.
 * @param {string} [props.alt] - The alt text for the avatar image.
 * @param {string} [props.href] - The URL to navigate to when the avatar is clicked.
 * @param {boolean} [props.hasEditOverlay] - Whether to show the "edit" overlay.
 * @param {boolean} [props.isMuted] - Whether the avatar is visually isMuted.
 * @param {React.ReactNode} props.fallback - The fallback content if the image fails to load.
 * @param {AvatarType} props.type - The type of the avatar (user, space, project, etc.).
 * @param {string} [props.title] -  An optional title for the avatar, useful for when no additional text is provided will provide a native tooltip on hover
 * @returns {React.ReactElement} The rendered avatar.
 */
export declare function Avatar({ className, shape, size, src, srcSet, alt, href, hasEditOverlay, isMuted, fallback, title }: AvatarProps): React.ReactElement;
export declare const avatarSizeMap: {
    small: number;
    medium: number;
    large: number;
};