@sinchsmb/ui-kit
Version:
UI kit for SinchSMB frontend
66 lines (65 loc) • 2.06 kB
TypeScript
/// <reference types="react" />
import { CommonProps } from '../../types';
import { AvatarColor, AvatarSize } from './constants';
/** Props for {@link Avatar} */
export interface AvatarProps extends CommonProps {
/**
* This attribute defines the alternative text describing the image.
* Can be an empty string, but can't be undefined (see https://webaim.org/techniques/alttext/)
*/
alt: string;
/**
* Color of avatar.
*
* @default {@link AvatarColor.Gray}
*/
color?: AvatarColor;
/**
* Size of avatar.
*
* @default {@link AvatarSize.Default}
*/
size?: AvatarSize;
/**
* URL of the avatar image which falls back to initials if the image fails to load.
*/
src?: string;
/**
* Initials of person to display in case of no image provided.
* If not provided, silhouette variant will be used as fallback.
*/
initials?: string;
}
/**
* Avatars are used to display thumbnails of individuals or companies in the interface.
* If color and size are not specified the Avatar has a gray background and default size 64x64px.
*
* <Story id="components-avatar--default" />
*
* ### Colors
*
* Optionally you can set a specific color bypassing the `color` props with one of the following values:
* `gray`, `blue`, `green`, `orange`, `red`
*
* <Story id="components-avatar--avatar-colors" />
*
* ### Sizes
*
* Optionally you can set a specific size bypassing the `size` props with one of the following values:
* `xsmall`, `small`, `default`, `large`
*
* <Story id="components-avatar--avatar-sizes" />
*
* ### Initials
*
* If the `initials` prop is provided, instead of showing default svg with silhouette, initials will be shown.
*
* <Story id="components-avatar--avatar-initials" />
*
* ### Images
*
* If the image source is provided by `src` prop to the Avatar, the component will use that image as a background.
*
* <Story id="components-avatar--avatar-image" />
*/
export declare function Avatar(props: AvatarProps): JSX.Element;