@itwin/itwinui-react/esm/core/Avatar/Avatar.d.ts

A react component library for iTwinUI

import * as React from 'react';
import { SoftBackgrounds } from '../../utils/index.js';
import type { AnyString, PolymorphicForwardRefComponent } from '../../utils/index.js';
export type AvatarStatus = 'online' | 'busy' | 'away' | 'offline';
type StatusTitles = {
    [key in Exclude<AvatarStatus, ''>]: string;
};
type AvatarProps = {
    /**
     * Size of an avatar.
     * @default 'small'
     */
    size?: 'small' | 'medium' | 'large' | 'x-large';
    /**
     * Status/Availability of a user.
     */
    status?: AvatarStatus;
    /**
     * Abbreviation to be displayed.
     */
    abbreviation?: string;
    /**
     * User image to be displayed. Can be `<img>` or `<svg>` or anything else.
     */
    image?: React.JSX.Element;
    /**
     * Color of the icon. You can use `getUserColor` function to generate color from user name or email. If not provided, default background color from CSS styling will be used (hsl(72, 51%, 56%) / olive green).
     */
    backgroundColor?: keyof typeof SoftBackgrounds | AnyString;
    /**
     * Translated status messages shown on hover.
     */
    translatedStatusTitles?: StatusTitles;
};
export declare const defaultStatusTitles: StatusTitles;
/**
 * Basic avatar component
 * @example
 * <caption>Small icon with abbreviation</caption>
 * <Avatar size='small' abbreviation='TR' backgroundColor='green'/>
 * @example
 * <caption>Medium icon with image</caption>
 * <Avatar size='medium' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
 * @example
 * <caption>Large icon with status</caption>
 * <Avatar size='large' abbreviation='TR' backgroundColor='green' status='online' />
 * @example
 * <caption>X-large icon with image</caption>
 * <Avatar size='x-large' abbreviation='TR' backgroundColor='green' image={<img src="https://cdn.example.com/user/profile/pic.png" />}/>
 */
export declare const Avatar: PolymorphicForwardRefComponent<"span", AvatarProps>;
export {};