@cbinsights/fds/lib/components/Avatar/index.d.ts

Form: A design system by CB Insights

import React, { HTMLAttributes } from 'react';
import Icon from 'components/Icon';
export declare const RADII: readonly ["square", "circle"];
export declare const BG_COLORS: readonly ["white", "haze", "lightGray", "orange", "charcoal", "navy", "aqua", "gray", "red", "purple", "blue"];
export declare const SIZES: readonly ["s", "m", "l"];
export declare const INITIALS_LENGTH: readonly [1, 2];
export declare const grabInitials: (str: string, initialsCount?: number) => string;
export declare const trimName: (str: string) => string | null;
export interface AvatarProps extends HTMLAttributes<HTMLElement | HTMLButtonElement | HTMLAnchorElement> {
    /** Controls color of button */
    bgColor?: typeof BG_COLORS[number];
    /** Controls the size of the button */
    size?: typeof SIZES[number];
    /** Controls radius of button (slightly rounded square, or circle) */
    radius?: typeof RADII[number];
    /** Control initials displayed, and also used for title accessibility attribute (uses 2 words max for initials) */
    name?: string;
    /** Sets background image over initials */
    imgUrl?: string;
    /** Controls how many initials can be displayed */
    initialsLength?: typeof INITIALS_LENGTH[number];
    /**  Accepts FDS Icon. Renders if name or imgUrl are not present  */
    PlaceholderIcon?: Icon;
    /**
     * Takes in a react-router `Link` reference and sets it
     * as the base element. You may ONLY use it like the
     * following:
     *
     * - `import { Link } from 'react-router'`
     * - `Link={Link}`
     */
    Link?: React.ComponentType;
    /** Adds an aria-label to the component (we add a default one for you, but it's preferred to add one if you can.) */
    'aria-label'?: string;
    href?: string;
}
declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
export default Avatar;