@progress/kendo-react-layout/card/interfaces/AvatarProps.d.ts

React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { avatarType } from './Enums.js';
export interface AvatarProps {
    /**
     * Sets the Avatar children elements.
     *
     * @example
     * ```jsx
     * <Avatar>AB</Avatar>
     * ```
     */
    children?: React.ReactNode;
    /**
     * Sets additional CSS styles to the Avatar.
     *
     * @example
     * ```jsx
     * <Avatar style={{ backgroundColor: 'blue' }}>AB</Avatar>
     * ```
     */
    style?: React.CSSProperties;
    /**
     * Sets additional classes to the Avatar.
     *
     * @example
     * ```jsx
     * <Avatar className="custom-class">AB</Avatar>
     * ```
     */
    className?: string;
    /**
     * Sets the type of the Avatar.
     *
     * The supported values are:
     * * `image`
     * * `text`
     * * `icon`
     *
     * @example
     * ```jsx
     * <Avatar type="image" src="avatar.jpg" />
     * ```
     */
    type?: avatarType | string;
    /**
     * Configures the `size` of the Avatar.
     *
     * The available options are:
     * - small
     * - medium
     * - large
     *
     * @default undefined (theme-controlled)
     *
     * @example
     * ```jsx
     * <Avatar size="large">AB</Avatar>
     * ```
     */
    size?: 'small' | 'medium' | 'large';
    /**
     * Configures the `roundness` of the Avatar.
     *
     * The available options are:
     * - small
     * - medium
     * - large
     * - full
     * - none
     *
     * @default undefined (theme-controlled)
     *
     * @example
     * ```jsx
     * <Avatar rounded="full">AB</Avatar>
     * ```
     */
    rounded?: 'small' | 'medium' | 'large' | 'full' | 'none';
    /**
     * Sets a border to the Avatar.
     *
     * @example
     * ```jsx
     * <Avatar border>AB</Avatar>
     * ```
     */
    border?: boolean;
    /**
     * Configures the `fillMode` of the Avatar.
     *
     * The available options are:
     * - solid
     * - outline
     *
     * @default undefined (theme-controlled)
     *
     * @example
     * ```jsx
     * <Avatar fillMode="outline">AB</Avatar>
     * ```
     */
    fillMode?: 'solid' | 'outline';
    /**
     * Configures the `themeColor` of the Avatar.
     *
     * The available options are:
     * - base
     * - primary
     * - secondary
     * - tertiary
     *
     * @default undefined (theme-controlled)
     *
     * @example
     * ```jsx
     * <Avatar themeColor="primary">AB</Avatar>
     * ```
     */
    themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary';
    /**
     * Sets the URL for the image when type is 'image'.
     *
     * @example
     * ```jsx
     * <Avatar type="image" src="avatar.jpg" />
     * ```
     */
    src?: string;
}