@trail-ui/react
Version:
63 lines (60 loc) • 1.93 kB
TypeScript
import * as react from 'react';
import { HTMLAttributes } from 'react';
import { AvatarVariantProps, SlotsToClasses, AvatarSlots } from '@trail-ui/theme';
import { ContextValue } from 'react-aria-components';
interface AvatarProps extends Omit<HTMLAttributes<HTMLElement>, 'color'>, Omit<AvatarVariantProps, 'isInGroup' | 'isInGridGroup'> {
elementType?: string;
/**
* The name of the person in the avatar. -
* if **src** has loaded, the name will be used as the **alt** attribute of the **img**
* - If **src** is not loaded, the name will be used to create the initials
*/
name?: string;
/**
* Image source.
*/
src?: string;
/**
* Image alt text.
*/
alt?: string;
icon?: React.ReactNode;
/**
* If `true`, the fallback logic will be skipped.
* @default false
*/
ignoreFallback?: boolean;
/**
* If `false`, the avatar will show the background color while loading.
*/
showFallback?: boolean;
/**
* Function to get the initials to display
*/
getInitials?: (name: string) => string;
/**
* Custom fallback component.
*/
fallback?: React.ReactElement;
/**
* Function called when image failed to load
*/
onError?: () => void;
/**
* The component used to render the image.
* @default "img"
*/
ImgComponent?: React.ElementType;
/**
* Props to pass to the image component.
*/
imgProps?: React.ImgHTMLAttributes<HTMLImageElement>;
/**
* Classes object to style the avatar and its children.
*/
classNames?: SlotsToClasses<AvatarSlots>;
onClick?: () => void;
}
declare const AvatarContext: react.Context<ContextValue<AvatarProps, HTMLSpanElement>>;
declare const _Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLSpanElement>>;
export { _Avatar as Avatar, AvatarContext, AvatarProps };