import React from 'react';
import { IconDefinition } from '../../index';
import { colors } from '../../index';
export declare type AvatarProps = {
    /**
     * Image to fill the avatar.
     */
    img?: string;
    /**
     * alt props for the imgage
     */
    alt?: string;
    /**
     * Text to display in the avatar
     * e.g a user's initials
     * Only the first two letters will be shown
     */
    text?: string;
    /**
     * Icon to display within the circle
     */
    icon?: IconDefinition;
    /**
     * Makes the avatar smaller.
     * Terminology from the desginers of the Design System
     */
    size?: 'compact' | 'big' | 'default';
    /**
     * Provided an href the avatar vil render as an ancor tag
     */
    href?: string;
    onClick?: (e: React.SyntheticEvent) => void;
    color?: 'transparent' | keyof typeof colors;
    bgColor?: string;
    style?: React.CSSProperties;
    className?: string;
    tabIndex?: number;
} & ({
    /**
     *  Status indicator. Online, offline and inactive = green, red and yellow dot
     */
    status?: 'online' | 'offline' | 'inactive';
} | {
    /**
     *  Status indicator. Online, offline and inactive = green, red and yellow dot
     */
    avatar?: React.ReactNode;
});
export declare const Avatar: (props: AvatarProps) => JSX.Element;